荷风送香 發表於 2023-8-28 15:00:00

Next.js Runtime Errors All In One

<h1 id="nextjs-runtime-errors-all-in-one">Next.js Runtime Errors All In One</h1>
<blockquote>
<p>React hydration render bug</p>
</blockquote>
<pre><code class="language-js">Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "224828" Client: "224829"
</code></pre>
<p>See more info here: https://nextjs.org/docs/messages/react-hydration-error</p>
<h2 id="errors-">errors ❌</h2>
<ol>
<li>Warning: An error occurred during <code>hydration</code>. The server HTML was replaced with client content in <code>&lt;div&gt;</code>.</li>
</ol>
<p>See more info here: https://nextjs.org/docs/messages/react-hydration-error</p>
<ol>
<li>Uncaught Error: <code>Text content</code> does not match server-rendered HTML.</li>
<li>Uncaught Error: Hydration failed because the <code>initial UI</code> does not match what was rendered on the server.</li>
<li>Uncaught Error: There was an error while hydrating. Because the error happened outside of a <code>Suspense boundary</code>, the entire root will switch to client rendering.</li>
</ol>
<p>https://github.com/facebook/react/issues/24430</p>
<p><img src="https://img2023.cnblogs.com/blog/740516/202308/740516-20230828080706834-1363471079.png" alt="image" loading="lazy"></p>
<ol start="2">
<li><code>Warning: Extra attributes from the server</code>: data-new-gr-c-s-check-loaded,data-gr-ext-installed</li>
</ol>
<pre><code class="language-js">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)
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/740516/202309/740516-20230914005941719-880749492.png" alt="image" loading="lazy"></p>
<p>https://github.com/vercel/next.js/discussions/22388#discussioncomment-6992884</p>
<ol>
<li>禁用浏览器插件</li>
<li>Chrome 开启无痕模式</li>
<li>html / body 添加 <code>suppressHydrationWarning={true}</code></li>
</ol>
<p><img src="https://img2023.cnblogs.com/blog/740516/202310/740516-20231010014346283-308282078.png" alt="image" loading="lazy"></p>
<h2 id="solutions">solutions</h2>
<blockquote>
<p>Why This Error Occurred</p>
</blockquote>
<p>While rendering your application, there was a difference between the React tree that was <code>pre-rendered</code> from the <code>server</code> and the React tree that was rendered during the <code>first render</code> in the <code>browser</code> (<code>hydration</code>).</p>
<ol>
<li><code>Incorrect nesting</code> of HTML tags</li>
<li>Using checks like <code>typeof window !== 'undefined'</code> in your rendering logic</li>
<li>Using browser-only APIs like <code>window</code> or <code>localStorage</code> in your rendering logic</li>
<li>Browser <code>extensions</code> modifying the HTML</li>
<li>Incorrectly configured <code>CSS-in-JS</code> libraries</li>
<li>Incorrectly configured <code>Edge/CDN</code> that attempts to modify the html response, such as Cloudflare Auto Minify</li>
</ol>
<p>https://nextjs.org/docs/app/building-your-application/styling/css-in-js</p>
<p>https://github.com/vercel/next.js/tree/canary/examples</p>
<p>https://developers.cloudflare.com/speed/optimization/content/auto-minify/</p>
<blockquote>
<p>Using <code>useEffect</code> to run on the <code>client</code> only</p>
</blockquote>
<pre><code class="language-jsx">import { useState, useEffect } from 'react'

export default function App() {
const = useState(false)
useEffect(() =&gt; {
    setIsClient(true)
}, [])
return &lt;h1&gt;{isClient ? 'This is never prerendered' : 'Prerendered'}&lt;/h1&gt;
}
</code></pre>
<blockquote>
<p>Disabling <code>SSR</code> on specific <code>components</code></p>
</blockquote>
<pre><code class="language-jsx">import dynamic from 'next/dynamic'
const NoSSR = dynamic(() =&gt; import('../components/no-ssr'), { ssr: false })

export default function Page() {
return (
    &lt;div&gt;
      &lt;NoSSR /&gt;
    &lt;/div&gt;
)
}
</code></pre>
<p>https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr</p>
<blockquote>
<p>Using <code>suppressHydrationWarning</code></p>
</blockquote>
<pre><code class="language-jsx">&lt;time datetime="2016-10-25" suppressHydrationWarning /&gt;
</code></pre>
<h3 id="suppresshydrationwarningtrue-"><code>suppressHydrationWarning={true}</code> ✅</h3>
<pre><code class="language-tsx">export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
    &lt;html lang="en"&gt;
      &lt;body
      suppressHydrationWarning={true}
      className={inter.className}&gt;
      {children}
      &lt;/body&gt;
    &lt;/html&gt;
)
}

</code></pre>
<p>https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c/75339011#75339011</p>
<h2 id="demos">demos</h2>
<pre><code class="language-jsx">"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 &lt; 1000000000; i++) {
    duration + 0;
}
return duration * 0.1;
}

export default function Page() {
const competitionStartTime = 1692956171;
const = useState(
    Math.round(Date.now() / 1000) - competitionStartTime
);
const = useState(0);
const modelIntervalRef = useRef(0);
const competitionTimeIntervalRef = useRef(0);
const = useState(false);
const addOneSecond = () =&gt; setCompetitionRunningTime((prev) =&gt; prev + 1);

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

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

    return () =&gt; {
      clearInterval(modelIntervalRef.current);
      clearInterval(competitionTimeIntervalRef.current);
    };
}, );

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

<h2 id="--反爬虫测试打击盗版️如果你看到这个信息-说明这是一篇剽窃的文章请访问-httpswwwcnblogscomxgqfrms-查看原创文章"><div id="anti-crawler" style="color: rgba(255, 0, 0, 1)"> (🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！</div></h2>
<h2 id="refs">refs</h2>
<p>https://stackoverflow.com/questions/76976249/warning-text-content-did-not-match-server-562-client-563-when-creating-a/76988860#76988860</p>
<p>https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=telemetry</p>
<hr>
<div>

</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2021</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>


</div>
<div id="MySignature" role="contentinfo">
    <div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/17661326.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/17661326.html
頁: [1]
查看完整版本: Next.js Runtime Errors All In One