next.js 中的 Hydration 错误 - 不匹配的文本、throwOnHydrationMismatch、updateHostRoot答案

【问题标题】：Hydration error in next.js - unmatched text, throwOnHydrationMismatch, updateHostRootnext.js 中的 Hydration 错误 - 不匹配的文本、throwOnHydrationMismatch、updateHostRoot
【发布时间】：2022-11-30 14:45:46
【问题描述】：

我在具有路由 event/[id] 的特定事件页面上遇到此问题。显然，我开发代码的队友没有遇到任何问题。但是，每当我重新加载页面时，我都会遇到这个问题。如果我通过正常流程进入页面，即url/eventList -> 点击事件卡 -> url/event/[id] 那么一切正常。但是，一旦我重新加载页面，我就会遇到水合作用错误。

npm 版本：8.19.3
节点版本：16.17.0

错误：

1. Text content does not match server-rendered HTML.
2. Error: Hydration failed because the initial UI does not match what was rendered on the server.
3. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

/events/[id]页面；：

import Event from '../../../Components/Event/Event';
import { useRouter } from 'next/router';
import classes from './event.module.css';

const EventDetails = (props) => {
  const router = useRouter();

  const {
    query: { tid },
  } = router;

  return (
    <section style={{ minHeight: '91vh' }} className={classes.background}>
      <Event eventDetails={props.eventDetails} teamId={tid} />
    </section>
  );
};

export async function getStaticPaths() {
  const events = await fetch(
    process.env.NEXT_PUBLIC_BACKEND_API + 'events/'
  ).then((res) => res.json());

  return {
    fallback: false,
    paths: events.map((event) => {
      const eventId = event.id;
      return {
        params: {
          id: eventId,
        },
      };
    }),
  };
}

export async function getStaticProps(context) {
  const eventId = context.params.id;
  const res = await fetch(
    process.env.NEXT_PUBLIC_BACKEND_API + 'events/' + eventId
  );
  if (!res || res.status != 200) {
    return {
      notFound: true,
    };
  }
  const eventDetails = await res.json();
  return {
    props: {
      eventDetails: eventDetails,
    },
    revalidate: 100,
  };
}

export default EventDetails;

package.json :-

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm run prettify && next dev",
    "build": "npm run prettify && next build",
    "start": "next start",
    "lint": "npm run prettify && next lint",
    "prettify": "prettier --write \"**/*.{js, jsx}\""
  },
  "dependencies": {
    "@emotion/react": "11.10.4",
    "@emotion/server": "11.10.0",
    "@emotion/styled": "11.10.4",
    "@mui/icons-material": "5.10.6",
    "@mui/material": "5.10.6",
    "@mui/x-date-pickers": "^5.0.3",
    "cryptr": "^6.0.3",
    "dayjs": "^1.11.5",
    "intl": "^1.2.5",
    "mui-file-dropzone": "^4.0.2",
    "next": "12.2.5",
    "next-auth": "^4.12.0",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-share": "^4.4.1",
    "react-toastify": "^9.0.8",
    "swr": "^1.3.0",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "eslint": "8.23.1",
    "eslint-config-next": "12.3.1",
    "eslint-config-prettier": "8.5.0",
    "prettier": "2.7.1"
  }
}

我已经尝试修改 getStaticPaths 和 getStaticProps 但这个问题仍然存在。

【问题讨论】：

Event 组件中有什么？
EventDetails 中的任何内容都不会触发此类错误。该问题很可能出现在Event（或其子项之一）的下游。你能告诉我们Event的代码吗？

标签： node.js reactjs next.js

【解决方案1】：

服务器输出与客户端不匹配时的常见问题。前反应 18, 你只在你的 '浏览器控制台'，但是对于新的专业，你可能会遇到这个问题，同时使用获取静态道具获取 JSON 数据并将数据显示到存在此问题的页面。

我的其他项目也有这个错误，你应该检查你的tags是否有错误，如：

Warning: Expected server HTML to contain a matching <div> in <div>.

重新检查后它应该可以工作DOM并修复一些closing-tags。

您可以在 <Card.Text></Card.Text> 组件下有一个元素，它在控制台中显示错误或不显示错误，具体取决于 next 的版本，例如：
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
Card.Text 组件可以接受一个 as="div" 属性来解决这个问题。

其他选项可能是导入没有的组件动态SSR因为它是动态生成标头的组件客户端并且需要访问浏览器中的 window 对象。

无论如何，您可以在官方 Github 中找到关于该问题的vercel/nextjs discussion。

【讨论】：