[LG-5798] feat: Emotion SSR Support #3384
Merged
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: cfe20cf 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.82 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
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