在 Urql clint 中打开 ssr 时，我收到以下错误：没想到服务器 HTML 在 <div> 中包含 <a>

问题描述

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 警告：没想到服务器 HTML 包含 in 。 在 div 在样式（div）（webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73） 在 div 在样式（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) 在容器（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>
    </>
  );
};

解决方法

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

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

,

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

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

祝你好运！