Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs - Theming): 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" #6006

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(docs - Theming): 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" #6006

wants to merge 3 commits into from
+13 −8

Conversation

RaannaKasturi
Copy link

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

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="">



<ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>

<NotFoundBoundary notFound={}>
<NotFoundErrorBoundary pathname="/" notFound={} notFoundStyles={undefined} ...>




<script>
<script>

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

@RaannaKasturi
Resolving Issue "Hydration failed because the server rendered HTML di…
89e0158 
…dn'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"

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.
@vercel Vercel
Copy link

vercel bot commented Dec 7, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview Dec 11, 2024 11:05am

@vercel Vercel
Copy link

vercel bot commented Dec 7, 2024

@RaannaKasturi is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@RaannaKasturi RaannaKasturi changed the title Resolving Issue "Hydration failed because the server rendered HTML di… 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" Dec 7, 2024
@RaannaKasturi RaannaKasturi changed the title 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" fix(docs - Theming): 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" Dec 7, 2024
@wkc41
Copy link

wkc41 commented Dec 8, 2024

@CodiumAI-Agent /describe

@CodiumAI-Agent
Copy link

CodiumAI-Agent commented Dec 8, 2024 •
edited
Loading

Title

(Describe updated until commit cbdcce5)

fix(docs - Theming): 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"

User description

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

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="">



<ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>

<NotFoundBoundary notFound={}>
<NotFoundErrorBoundary pathname="/" notFound={} notFoundStyles={undefined} ...>




<script>
<script>

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

PR Type

Bug fix, Documentation

Description

  • Fixed a hydration mismatch issue by dynamically importing NextThemesProvider with SSR disabled in the ThemeProvider component.
  • Updated the ThemeProvider to use the ThemeProviderProps type from next-themes for better type safety.
  • Enhanced the documentation example for creating a theme provider to reflect the updated implementation.

Changes walkthrough 📝

Relevant files
Bug fix
next.mdx
Fix hydration issue by disabling SSR for ThemeProvider     

apps/www/content/docs/dark-mode/next.mdx

  • Updated the ThemeProvider component to use dynamic import for
    NextThemesProvider with SSR disabled.
  • Adjusted the ThemeProvider props to use ThemeProviderProps type from
    next-themes.
  • Improved documentation example for creating a theme provider.
    		•  +13/-8   

    💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

    @RaannaKasturi
    Copy link
    Author

    Is there anything else that needs to be done? or is it done..?

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Reviewers
    No reviews
    Assignees
    No one assigned
    Labels
    None yet
    Projects
    None yet
    Milestone
    No milestone
    Development

    Successfully merging this pull request may close these issues.
    3 participants
    @RaannaKasturi @wkc41 @CodiumAI-Agent