Fix FOUC by inlining styled-jsx styles during SSR - #84
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
What
On page load, the homepage flashed unstyled content: the profile image painted at its natural full size before snapping to 120px, and the social icons started small and "grew" once styles applied.
The components use styled-jsx, but with the App Router those styles are only injected at client-side hydration unless a style registry is set up — so the server-rendered HTML contained no component CSS.
This adds the official Next.js styled-jsx registry pattern:
src/app/registry.tsx: aStyledJsxRegistryclient component that collects styled-jsx styles during server rendering and injects them into the streamed HTML viauseServerInsertedHTMLsrc/app/layout.tsx: wraps{children}in the registryThis fixes the flash site-wide for all styled-jsx components, not just the homepage.
Verification
.next/server/app/index.html) now contains the styled-jsx rules inline, so the first paint is fully styledyarn buildpasses; page renders correctly with no console errorsyarn test: 38 passed. The two mobile visual-snapshot failures are pre-existing on the test machine (identical failures on unmodifiedmain; font antialiasing drift from a newer local Chromium vs the snapshot baseline) and unrelated to this change