Skip to content

fix(core): resolve server-client hydration mismatch in theme provider layout #649

Merged
Aditya948351 merged 2 commits into
devpathindcommunity-india:masterfrom
shivani11jadhav:feature/theme-hydration-fix
Jun 18, 2026
Merged

fix(core): resolve server-client hydration mismatch in theme provider layout #649
Aditya948351 merged 2 commits into
devpathindcommunity-india:masterfrom
shivani11jadhav:feature/theme-hydration-fix

Conversation

@shivani11jadhav

@shivani11jadhav shivani11jadhav commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🔍 Bug Fix Overview for Issue #629

This PR resolves the structural Next.js App Router hydration mismatch error triggered when the client reads theme configurations (dark/light states) from localStorage during the initial HTML mounting cycle. It ensures consistent server-rendered and client-hydrated DOM trees.

🛠️ Key Technical Implementations

  1. Mounted State Lifecycle (theme-provider.tsx):

    • Introduced a robust mounted state tracker (useState(false)) inside the global Theme Provider.
    • Leveraged a useEffect hook to delay client-side theme execution until hydration completes safely on the browser client.
    • Rendered a consistent, visually hidden fallback structure (style={{ visibility: 'hidden' }}) during the server-render pass to eliminate Flash of Unstyled Content (FOUC) and tree discrepancies.

  2. Hydration Attribute Suppressions (layout.tsx):

    • Applied the standard Next.js suppressHydrationWarning flag strictly to the top-level <html> and <body> tags.
    • This safely allows dynamic theme attributes to initialize without causing critical runtime script halts or browser console error logs.

🧪 Verification Metrics

  • Build Quality: Local execution of npm run build compiled 100% successfully across all static routes with zero hydration drop warnings.
  • Console Inspection: Verified that the browser development console is now completely clean and free of hydration mismatch errors.

@shivani11jadhav

shivani11jadhav commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Hi @Aditya948351, Issue #629 is complete and the branch is clean. Please review and merge!

Aditya948351
Aditya948351 approved these changes Jun 18, 2026
View reviewed changes

@Aditya948351 Aditya948351 left a comment •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review updated.

@Aditya948351 Aditya948351 linked an issue Jun 18, 2026 that may be closed by this pull request
[Testing]: Set up Playwright E2E testing for core user flows #637
Closed
@Aditya948351 Aditya948351 removed a link to an issue Jun 18, 2026
[Testing]: Set up Playwright E2E testing for core user flows #637
Closed
@Aditya948351 Aditya948351 linked an issue Jun 18, 2026 that may be closed by this pull request
fix(core): resolve server-client hydration mismatch in theme provider layout #629
Closed
@Aditya948351

Aditya948351 commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

@shivani11jadhav I will Close your Further PRs directly without Reviewing if issue is not linked Properly!

@Aditya948351 Aditya948351 self-requested a review June 18, 2026 16:55
Aditya948351
Aditya948351 requested changes Jun 18, 2026
View reviewed changes

@Aditya948351 Aditya948351 left a comment •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have some merge conflicts kindly resolve that so I can merge this. Also excellent work on the hydration mismatch fix for next themes and the TypeScript strict type casting. Highly recommended.

@Aditya948351

Aditya948351 commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

@shivani11jadhav I have resolved the single file conflict myself for now and merging this PR now!

@Aditya948351 Aditya948351 self-requested a review June 18, 2026 17:08
@Aditya948351 Aditya948351 added the level:intermediate Intermediate level issues label Jun 18, 2026
@Aditya948351 Aditya948351 merged commit 4648d70 into devpathindcommunity-india:master Jun 18, 2026
2 of 3 checks passed
@shivani11jadhav

shivani11jadhav commented Jun 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Thanks a lot for resolving the conflict and merging it,@Aditya948351 ! Really glad the hydration fix and TypeScript changes worked out well.

Also, sorry again for the issue tracking mix-up earlier—I will definitely double-check and make sure the exact issue is linked properly from the start in all my future PRs. Appreciate the guidance!

@shivani11jadhav

shivani11jadhav commented Jun 19, 2026

Copy link
Copy Markdown
Contributor Author

Hi,@Aditya948351 my PR has been merged successfully, but it is not showing in the GSSoC tracker/dashboard yet. Could you please verify if all the required GSSoC labels have been applied?

@Aditya948351

Aditya948351 commented Jun 19, 2026

Copy link
Copy Markdown
Collaborator

Hi,@Aditya948351 my PR has been merged successfully, but it is not showing in the GSSoC tracker/dashboard yet. Could you please verify if all the required GSSoC labels have been applied?

Yeah it takes time to update the production!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Aditya948351 Aditya948351 Awaiting requested review from Aditya948351

Assignees

@shivani11jadhav shivani11jadhav

Labels

gssoc:approved give 50+ base points level:intermediate Intermediate level issues type:bug type:performance

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

fix(core): resolve server-client hydration mismatch in theme provider layout

2 participants

@shivani11jadhav @Aditya948351