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=""> <HistoryUpdater> <RuntimeStyles> <HotReload assetPrefix=""> <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}> <DevRootNotFoundBoundary> <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}> <NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <Head>

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.

Dec 07 '24 05:12 RaannaKasturi

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

Dec 07 '24 05:12 vercel[bot]

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

A member of the Team first needs to authorize it.

Dec 07 '24 05:12 vercel[bot]

@CodiumAI-Agent /describe

Dec 08 '24 10:12 wkc41

Title

(Describe updated until commit https://github.com/shadcn-ui/ui/commit/f13b5867aadfdbe14511910fcc115e9922647800)

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=""> <HistoryUpdater> <RuntimeStyles> <HotReload assetPrefix=""> <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}> <DevRootNotFoundBoundary> <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}> <NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <Head>

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

Documentation, Enhancement

Description

Use dynamic import for ThemeProvider
Disable SSR to prevent hydration mismatch
Update example types with ThemeProviderProps
Minor formatting and quote consistency

Diagram Walkthrough

flowchart LR
  Doc["Dark mode guide (next.mdx)"]
  Dyn["Dynamic import ThemeProvider"]
  SSR["SSR disabled for provider"]
  Types["Use ThemeProviderProps type"]

  Doc -- "replace example code" --> Dyn
  Dyn -- "options" --> SSR
  Doc -- "update typings" --> Types

File Walkthrough

Relevant files

Documentation

next.mdx

Dynamic ThemeProvider with SSR disabled in docs

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

Switch to dynamic import of ThemeProvider.
Set { ssr: false } to avoid hydration mismatch.
Use ThemeProviderProps for props typing.
Normalize quotes and reorder imports.

+13/-8

Dec 08 '24 10:12 QodoAI-Agent

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

Dec 11 '24 11:12 RaannaKasturi

@RaannaKasturi Closing this since www is now deprecated. Thanks for the PR. Appreciate it.

Oct 15 '25 06:10 shadcn