fix(nextjs): resolve the UI language on the server so hydration does not fail - #564
Open
DonOmalVindula wants to merge 1 commit into
Open
fix(nextjs): resolve the UI language on the server so hydration does not fail#564DonOmalVindula wants to merge 1 commit into
DonOmalVindula wants to merge 1 commit into
Conversation
…not fail The i18n provider detected the language from the browser and its cookie on the client only, while the server rendered en-US, so translated texts (e.g. the sign-in button label) produced hydration errors whenever the browser language, the persisted cookie or a `?lang=` parameter differed. - The server provider resolves the language the way the client would (persisted cookie, then Accept-Language) and passes it down. - The client provider adds the `lang` URL parameter, which both renders can see, and hands the result to the i18n provider unless preferences.i18n.language is configured explicitly. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
Warning Review limit reachedNext included review available in 49 minutes. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (5)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🦋 Changeset detectedThe changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
@asgardeo/react'sI18nProviderpicks the initial language in a state initialiser frompreferences.language, then thelangURL parameter, then its storage (a cookie by default), thennavigator.language. On the server none of the browser-side sources exist, so the server render useden-USwhile the client render could pickfr-FR,en-GB, a persisted cookie value or a?lang=override. Every translated text rendered on first paint (button labels, headings of the embedded forms) then mismatched and React logged hydration errors.Fix
AsgardeoServerProviderresolves the language the way the client would detect it: the persisted cookie (preferences.i18n.storageKey, defaultasgardeo-i18n-language, when the storage strategy is the default cookie), then the first language ofAccept-Language(which mirrorsnavigator.language). An explicitly configuredpreferences.i18n.languagealways wins.AsgardeoClientProvidercombines that with thelangURL parameter (or the configuredurlParam), which both renders can read throughuseSearchParams, and passes the result aspreferences.i18n.languageto the i18n provider. Language switches at runtime keep working and are persisted by the i18n provider as before.resolveRequestLanguageutility with unit tests.With the
localStoragestorage strategy the server cannot see the stored value, so onlyAccept-Languageis used there.Testing
pnpm lint,tsc --noEmitandpnpm vitest run(64 tests) for@asgardeo/nextjs. The provider changes are covered by review; there is no component test setup in this package.Changeset included (
@asgardeo/nextjspatch).🤖 Generated with Claude Code