[LG-5798] feat: Emotion SSR Support #3384
Open
+192
−247
Conversation
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
🦋 Changeset detectedLatest commit: 94785dc The changes in this PR will be included in the next version bump. This PR includes changesets to release 91 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +70 B (0%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
adamrasheed
requested review from
TheSonOfThomp,
Copilot and
tsck
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds server-side rendering (SSR) support for Emotion styles in Next.js applications by exporting the CacheProvider component and adding comprehensive documentation for both App Router and Pages Router implementations. This enables proper extraction and injection of Emotion styles during server rendering, preventing flash of unstyled content (FOUC).
Key Changes:
- Exports
CacheProviderfrom@leafygreen-ui/emotionfor use in SSR configurations - Adds
@emotion/reactas a dependency to enable theCacheProviderexport - Documents Next.js App Router SSR setup using
useServerInsertedHTMLandCacheProvider - Documents Next.js Pages Router SSR setup using
extractCritical
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/emotion/package.json |
Adds @emotion/react ^11.14.0 as a dependency using proper caret notation |
packages/emotion/src/index.ts |
Imports and re-exports CacheProvider from @emotion/react |
packages/emotion/README.md |
Adds comprehensive SSR documentation for Next.js App Router and Pages Router with code examples |
.changeset/mean-sloths-wonder.md |
Documents the change as a minor version bump with appropriate description |
pnpm-lock.yaml |
Updates dependency resolution to include new @emotion/react and @emotion/cache packages; removes unrelated Next.js app dependencies |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
tsck
previously approved these changes
Dec 16, 2025
Collaborator
tsck
left a comment
tsck
left a comment
There was a problem hiding this comment.
The README needs a bit of a re-read, bunch of small issues there
tsck
approved these changes
Dec 16, 2025
Collaborator
tsck
left a comment
tsck
left a comment
There was a problem hiding this comment.
Tiny nit but otherwise LGTM
|
|
||
| ## SSR Compatibility | ||
|
|
||
| Emotion generates styles at runtime and injects them into the DOM. With Next.js App Router and Server Components, styles need to be extracted during server rendering and inserted into the HTML before it's sent to the client. Without proper configuration, you'll see a flash of unstyled content (FOUC) or styles won't apply at all. |
Collaborator
There was a problem hiding this comment.
Nit: I don't believe "FOUC" is ever referenced again, probably no value in giving it an acronym
Collaborator
There was a problem hiding this comment.
I think it's worth keeping here since it's a common acronym around the web, and it's nice to connect those dots
| } | ||
| ``` | ||
|
|
||
| ### Next.js (Pages Router) |
Collaborator
There was a problem hiding this comment.
What about non-NextJS cases? (e.g. Remix/ReactRouter)
| import { useServerInsertedHTML } from 'next/navigation'; | ||
| import { cache, CacheProvider } from '@leafygreen-ui/emotion'; | ||
|
|
||
| export default function EmotionRegistry({ |
Collaborator
There was a problem hiding this comment.
Wonder if it's worth exporting this from LG as well?
Contributor
|
Coverage after merging ar/LG-5798-ssr-docs into main will be
Coverage Report for Changed Files
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✍️ Proposed changes
Adds
CacheProviderexport from@leafygreen-ui/emotionand SSR documentation for integrating LeafyGreen UI with Next.js applications. This enables proper server-side rendering of Emotion styles for both App Router (usinguseServerInsertedHTML) and Pages Router (usingextractCritical), preventing flash of unstyled content (FOUC).🎟️ Jira ticket: LG-5798
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
@leafygreen-ui/emotionin a Next.js App Router projectEmotionRegistry.tsxfile following the README instructionsEmotionRegistrycssfrom@leafygreen-ui/emotionin a client component