在 Urql 客户端中打开 ssr 时出现以下错误：没想到服务器 HTML 在 <div> 中包含 <a>答案

【问题标题】：While turining on ssr in Urql clint Im geting the below error: Did not expect server HTML to contain a <a> in <div>在 Urql 客户端中打开 ssr 时出现以下错误：没想到服务器 HTML 在 <div> 中包含 <a>
【发布时间】：2021-04-06 02:25:33
【问题描述】：

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 警告：没想到服务器 HTML 会包含一个 in。 在 div 在 Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73) 在 div 在 Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73) 在 Flex (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/flex.js:25:5) 在 NavBar (webpack-internal:///./src/components/NavBar.tsx:31:142) 在索引处 (webpack-internal:///./src/pages/index.tsx:25:96) 在 withUrqlClient(Index) (webpack-internal:///./node_modules/next-urql/dist/next-urql.es.js:50:28) 在 ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/esm/color-mode-provider.js:46:5) 在 ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:78:71) 在 MyApp (webpack-internal:///./src/pages/_app.tsx:19:24) 在 ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47) 在 ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23) 在 Container (webpack-internal:///./node_modules/next/dist/client/index.js:150:5) 在 AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:639:24) 在 Root (webpack-internal:///./node_modules/next/dist/client/index.js:764:24) 强文本

import { Box, Button, Flex, Link } from "@chakra-ui/react";
import React from "react";
import NextLink from "next/link";
import { useLogoutMutation, useMeQuery } from "../generated/graphql";
import { isServer } from "../util/isServer";
interface NaveBarProps {}

export const NavBar: React.FC<NaveBarProps> = ({}) => {
  const [{ fetching: logOutFatching }, logout] = useLogoutMutation();
  const [{ data, fetching }] = useMeQuery({
    pause: isServer(),
  });

  let body = null;
  console.log('DATA', data);
  
  if (fetching) {
  } else if (!data?.me) {
    body = (
      <>
        <NextLink href="/login">
          <Link color="white" mr={2}>
            login
          </Link>
        </NextLink>
        <NextLink href="/registration">
          <Link color="white" mr={2}>
            Register
          </Link>
        </NextLink>
      </>
    );
  } else {
    body = (
     <>
     <Flex>
        <Box mr={3}>{data.me.username} </Box>
        <Button
        color = 'yellowgreen'
          onClick={() => {
            logout();
          }}
          isLoading={logOutFatching}
          variant="link"
        >
          logout
        </Button>
      </Flex>
      </>
    );
  }
  return (
    <>
    <Flex bg="tomato" p={4}>
      <Box ml={"auto"}>{body}</Box>
    </Flex>
    </>
  );
};

【问题讨论】：

嘿，如果你能提供一些问题的背景会很好。可能有一些代码 sn-p 可以帮助其他人最终重现和调试问题。感谢您粘贴堆栈跟踪，但只是粘贴不会有好处！

标签： html typescript frontend urql

【解决方案1】：

在 Ben Awad 在 youtube 上的 14 小时教程之后遇到了同样的问题。问题是 MeQuery 为 SSR 暂停，因此在客户端在接收到用户数据后呈现之前，userInfoBody 的设置不正确。简单的解决方法是对 userInfoBody 设置使用相同的 isServer 检查：

let userInfoBody = null;
if (isServer() || fetching) {
} ...

【讨论】：

【解决方案2】：

对于任何试图解决此问题的人来说，它来自 Ben Awad 在 youtube 上长达 14 小时的教程。我是这个项目的一部分，我自己也遇到了这个错误，我已经将它隔离在某个地方：从涉及 NextLink 组件的服务器和客户端渲染时存在一些不一致。

注释掉这两个链接将修复错误。这可能不是您正在寻找的答案，但其他人可能会在这里插话。我也会在接下来的几天里给这个时间！

祝你好运！

【讨论】：