Next.js Runtime Errors All In One

Next.js Runtime Errors 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

errors ❌

1. 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

2. Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed

app-index.js:31 Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)

https://github.com/vercel/next.js/discussions/22388#discussioncomment-6992884

1. 禁用浏览器插件
2. Chrome 开启无痕模式
3. html / body 添加 suppressHydrationWarning={true}

solutions

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 />

suppressHydrationWarning={true} ✅

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body
        suppressHydrationWarning={true}
        className={inter.className}>
        {children}
      </body>
    </html>
  )
}

https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c/75339011#75339011

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>
    </>
  );
}

refs

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

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=telemetry

---

---

©xgqfrms 2012-2021

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

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

---