Fix hydration mismatches in FeedbackForm (GoogleReCaptchaWidget, FormHeader)#11
Open
mamico wants to merge 2 commits into
Open
Fix hydration mismatches in FeedbackForm (GoogleReCaptchaWidget, FormHeader)#11mamico wants to merge 2 commits into
mamico wants to merge 2 commits into
Conversation
reCAPTCHA needs window/document to inject Google's script, so it can't render during SSR. The component branched on __CLIENT__ directly in its render output, so the server always rendered nothing while the client's first hydration pass rendered the whole provider/grid/recaptcha subtree in the same spot - a guaranteed mismatch on every page that mounts this widget. Render nothing on both the server and the client's first render, and only mount the real widget after hydration completes via an effect.
FormHeader is a tiny, always-needed component (a div + span). Lazy-loading it via @loadable/component caused a guaranteed hydration mismatch: unlike properly-registered loadables (see config.settings.loadables), this bare loadable() call isn't tracked by Volto's own SSR chunk extraction, so the server rendered it immediately while the client's first hydration pass rendered nothing until its chunk finished loading. There's no benefit to code-splitting something this small, so import it directly instead.
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
1 participant
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.
Summary
GoogleReCaptchaWidgetbranched on__CLIENT__directly in its render output, so the server always rendered nothing while the client's first hydration pass rendered the whole provider/grid/recaptcha subtree - a guaranteed mismatch on every page that mounts this widget. Fixed by rendering nothing on both the server and the client's first render, mounting the real widget only after hydration completes via an effect.FormHeaderwas lazy-loaded via@loadable/componentwithout being registered in Volto's own SSR chunk-extraction (config.settings.loadables), so the server rendered its content immediately while the client's first hydration pass could render nothing until its chunk finished loading. It's a tiny, always-needed component (a div + span), so there's no benefit to code-splitting it - fixed by importing it directly.Both were found while debugging a hydration mismatch that appeared on every page of a Volto 18.35 site using this addon (since
FeedbackFormmounts globally in the footer).Test plan
FeedbackFormmounted, with and withoutRAZZLE_RECAPTCHA_KEYconfigured