JZTXT

Next.js Runtime Error All In One

发布时间 2023-08-28 15:08:42作者: xgqfrms

Next.js Runtime Error All In One

React hydration render bug

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "224828" Client: "224829"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

error ❌

image

Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

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

https://github.com/facebook/react/issues/24430

solution

Why This Error Occurred

While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).

  1. Incorrect nesting of HTML tags
  2. Using checks like typeof window !== 'undefined' in your rendering logic
  3. Using browser-only APIs like window or localStorage in your rendering logic
  4. Browser extensions modifying the HTML
  5. Incorrectly configured CSS-in-JS libraries
  6. Incorrectly configured Edge/CDN that attempts to modify the html response, such as Cloudflare Auto Minify

https://nextjs.org/docs/app/building-your-application/styling/css-in-js

https://github.com/vercel/next.js/tree/canary/examples

https://developers.cloudflare.com/speed/optimization/content/auto-minify/

Using useEffect to run on the client only

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)
  useEffect(() => {
    setIsClient(true)
  }, [])
  return <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

Disabling SSR on specific components

import dynamic from 'next/dynamic'
const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr

Using suppressHydrationWarning

<time datetime="2016-10-25" suppressHydrationWarning />

demos

"use client";

import { useState, useEffect, useRef } from "react";

function calculateModelResult(duration) {
  // simulate the model calculation time, it costs 0.3s
  for (var i = 0; i < 1000000000; i++) {
    duration + 0;
  }
  return duration * 0.1;
}

export default function Page() {
  const competitionStartTime = 1692956171;
  const [competitionRunningTime, setCompetitionRunningTime] = useState(
    Math.round(Date.now() / 1000) - competitionStartTime
  );
  const [modelResult, setModelResult] = useState(0);
  const modelIntervalRef = useRef(0);
  const competitionTimeIntervalRef = useRef(0);
  const [pause, setPause] = useState(false);
  const addOneSecond = () => setCompetitionRunningTime((prev) => prev + 1);

  useEffect(() => {
    modelIntervalRef.current = setInterval(() => {
      setModelResult(calculateModelResult(competitionRunningTime));
    }, 1000);

    competitionTimeIntervalRef.current = setInterval(() => {
      addOneSecond();
      console.log(competitionRunningTime);
    }, 1000);

    return () => {
      clearInterval(modelIntervalRef.current);
      clearInterval(competitionTimeIntervalRef.current);
    };
  }, [competitionRunningTime]);

  const pasueFunction = () => {
    if (!pause) {
      clearInterval(competitionTimeIntervalRef.current);
    } else {
      competitionTimeIntervalRef.current = setInterval(addOneSecond, 1000);
    }
    setPause((prev) => !prev);
  };
  return (
    <>
      {/* suppressHydrationWarning ✅ */}
      {/* <h1> */}
      <h1 suppressHydrationWarning>
        Hello, the time of the match is {competitionRunningTime}, the model result is {modelResult}.
      </h1>
      <button onClick={pasueFunction}>{pause ? "Run" : "Pause"}</button>
    </>
  );
}

(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://stackoverflow.com/questions/76976249/warning-text-content-did-not-match-server-562-client-563-when-creating-a/76988860#76988860

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ?️，侵权必究⚠️！