From 89e01586abc497485d16327263bf1440a90660bc Mon Sep 17 00:00:00 2001
From: Nayan Kasturi <raannakasturi@gmail.com>
Date: Sat, 7 Dec 2024 10:58:33 +0530
Subject: [PATCH] Resolving Issue "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"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Log:
Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. 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

  ...
    <Router actionQueue={{state:{...}, ...}} assetPrefix="">
      <HistoryUpdater>
      <RuntimeStyles>
      <HotReload assetPrefix="">
        <ReactDevOverlay 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"
-                       data-theme="dark"
-                       style={{color-scheme:"dark"}}
                      >
                    ...
          ...

    at createUnhandledError (http://localhost:3000/_next/static/chunks/8b972_next_dist_client_aaf7d5._.js:744:19)
    at handleClientError (http://localhost:3000/_next/static/chunks/8b972_next_dist_client_aaf7d5._.js:905:98)
    at console.error (http://localhost:3000/_next/static/chunks/8b972_next_dist_client_aaf7d5._.js:1036:56)
    at emitPendingHydrationWarnings (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:2766:103)
    at completeWork (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7226:102)
    at runWithFiberInDEV (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:631:20)
    at completeUnitOfWork (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7996:23)
    at performUnitOfWork (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7938:28)
    at workLoopConcurrent (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7932:58)
    at renderRootConcurrent (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7914:71)
    at performWorkOnRoot (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:7553:112)
    at performWorkOnRootViaSchedulerTask (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_react-dom_d8e58c._.js:8387:9)
    at MessagePort.performWorkUntilDeadline (http://localhost:3000/_next/static/chunks/8b972_next_dist_compiled_33611c._.js:2348:64)


Suggestion & Resolution:
The issue arises due to a hydration mismatch in Next.js, where the server-rendered HTML doesn't match the client-rendered HTML. This typically happens when using dynamic, client-only features (like `ThemeProvider` for theme switching) with SSR. The mismatch can occur because server-side rendering doesn’t account for browser-specific attributes like `data-theme` or runtime differences such as `Date.now()`.

The provided code resolves this by disabling SSR for the `ThemeProvider` component using `dynamic` with `ssr: false`. This ensures the `ThemeProvider` runs only on the client, preventing hydration mismatches by aligning the server-rendered HTML with what React expects on the client side.
---
 apps/www/content/docs/dark-mode/next.mdx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)
diff --git a/apps/www/content/docs/dark-mode/next.mdx b/apps/www/content/docs/dark-mode/next.mdx
index 741d8494654..76bc3fa0e66 100644
--- a/apps/www/content/docs/dark-mode/next.mdx
+++ b/apps/www/content/docs/dark-mode/next.mdx
@@ -18,16 +18,21 @@ npm install next-themes
 ### Create a theme provider
 
 ```tsx title="components/theme-provider.tsx"
-"use client"
+'use client'
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from 'next-themes'
+import dynamic from 'next/dynamic'
+import * as React from 'react'
 
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+const NextThemesProvider = dynamic(
+    () => import('next-themes').then((e) => e.ThemeProvider),
+    {
+        ssr: false,
+    }
+)
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
 ```
 
