Skip to content

[styled-engine] do not reuse the emotion cache across SSR requests #46276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jun 11, 2025
Merged

[styled-engine] do not reuse the emotion cache across SSR requests #46276

merged 2 commits into from
Jun 11, 2025

Conversation

robbtraister
Copy link
Contributor

When performing SSR, subsequent requests cannot reuse the same emotion cache, as it will think the style nodes have already been injected. This gates the cache reuse to only happening in a DOM environment (browser or jest).

@robbtraister
Copy link
Contributor Author

I created a reproduction here: robbtraister/mui-ssr-repro#1

When javascript is disabled in your browser, only the first request will be styled correctly. Subsequent requests will not have styles applied properly via SSR.

After applying the patch in the pull-request linked above, the styles will be applied correctly on all requests.

@robbtraister robbtraister mentioned this pull request Jun 4, 2025
Merged
1 task
@robbtraister robbtraister changed the title do not reuse the emotion cache across SSR requests [styled-engine] do not reuse the emotion cache across SSR requests Jun 4, 2025
@zannager zannager added the package: styled-engine Specific to @mui/styled-engine label Jun 5, 2025
@zannager zannager requested a review from siriwatknp June 5, 2025 06:53
@mui-bot
Copy link

mui-bot commented Jun 6, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-46276--material-ui.netlify.app/

Bundle size report

@mui/material parsed: 🔺+27B(+0.01%) gzip: 🔺+2B(0.00%)
@mui/lab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/system parsed: 🔺+27B(+0.03%) gzip: 🔺+1B(0.00%)
@mui/utils parsed: 0B(0.00%) gzip: 0B(0.00%)

Show details for 100 more bundles (86 more not shown)

@mui/lab/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPickerSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/ClockPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LoadingButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Masonry parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MonthPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/PickersDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabContext parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabPanel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Timeline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineConnector parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineDot parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineOppositeContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineSeparator parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeView parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/useAutocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/YearPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Accordion parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionDetails parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionSummary parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Alert parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AlertTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AppBar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Autocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Avatar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AvatarGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Backdrop parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Badge parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigation parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigationAction parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Box parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Breadcrumbs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Button parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Card parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActionArea parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardMedia parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Checkbox parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Chip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CircularProgress parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ClickAwayListener parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Collapse parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Container parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CssBaseline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DefaultPropsProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Dialog parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContentText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Divider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Drawer parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fade parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FilledInput parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControl parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControlLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormHelperText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GlobalStyles parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GridLegacy parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grow parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Icon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/IconButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItemBar parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 8e69f66

siriwatknp
siriwatknp approved these changes Jun 11, 2025
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix!

@siriwatknp siriwatknp merged commit 9e96abc into mui:master Jun 11, 2025
20 checks passed
siriwatknp added a commit to siriwatknp/material-ui that referenced this pull request Jun 12, 2025
@siriwatknp
cherry pick from mui#46276
b464865
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@siriwatknp siriwatknp siriwatknp approved these changes

Assignees
No one assigned
Labels
package: styled-engine Specific to @mui/styled-engine
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@robbtraister @mui-bot @siriwatknp @zannager @sai6855