search

vercel / speed-insights

Vercel Speed Insights package
https://vercel.com/docs/speed-insights
Apache License 2.0
63 stars 9 forks source link

Hydration failed because the server rendered HTML didn't match the client. #89

Open joelachance opened 1 week ago

joelachance commented 1 week ago

When rendering my Next app, I'm getting an SSR error from SpeedInsights. How do I know it's from Speed Insights? I can comment it out and the error goes away.

Here's the error: 

react-dom-client.development.js:4100 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <HotReload assetPrefix="">
      <ReactDevOverlay onReactError={function} state={{nextId:1, ...}} dispatcher={{...}}>
        <DevRootNotFoundBoundary>
          <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}>
            <NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...>
              <RedirectBoundary>
                <RedirectErrorBoundary router={{...}}>
                  <Head>
                  <link>
                  <script>
                  <script>
                  <RootLayout>
                    <html lang="en">
                      <head>
                      <body>
                      <SpeedInsights2>
+                       <Suspense fallback={null}>
                      ...
                  ...
        ...

    at throwOnHydrationMismatch (react-dom-client.development.js:4100:11)
    at updateSuspenseComponent (react-dom-client.development.js:8728:15)
    at beginWork (react-dom-client.development.js:9972:18)
    at runWithFiberInDEV (react-dom-client.development.js:543:16)
    at performUnitOfWork (react-dom-client.development.js:14996:22)
    at workLoopConcurrent (react-dom-client.development.js:14990:9)
    at renderRootConcurrent (react-dom-client.development.js:14965:15)
    at performWorkOnRoot (react-dom-client.development.js:14300:13)
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15852:7)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48)

I'm seeing some Stack Overflows referencing issues where you might have HTML elements inside one another, like p els inside other p els, etc.

You can silence this error by doing this.