React Router 7 - HydrateFallback not rendering MUI/Emotion styles during client hydration? #12754

Jarbuckle · 2025-01-15T23:58:21Z

Jarbuckle
Jan 15, 2025

Hello everyone!

I'm working on a React Router 7 app, using MUI (with Emotion as the styling engine) pretty much exclusively for UI components and styles. I'm trying to get MUI/Emotion styling working between server-side and client-side renderings of the page, and running into a snag:

When rendering my Root Route, I'm using a HydrateFallback as the initial server rendering and while the clientLoader is running. However, while the initial server-rendered version of the page has the expected MUI styling for the components I use (e.g. a ProgressCircular), it seems that as soon as the clientLoader starts running, the styles (i.e. all the <style> tags inserted by Emotion initially) disappear entirely, only to reappear after the clientLoader finishes.

Since I'm using HydrateFallback, my current interpretation of this is that the DOM rendered for the HydrateFallback doesn't include the MUI/Emotion elements needed to render the <style> tags immediately when the hydration starts. However, I have wrapped the contents of HydrateFallback with a <CacheProvider> and <ThemeProvider>, identical to the normal page content.

Also, it's not clear to me why a new page is being rendered at all: by my reading of the React Router 7 docs, at least, it seems that the server-rendered version is theoretically what should be getting rendered up until the completion of the clientLoader -- am I misunderstanding that part?

Here are some further details:

Versions/Libraries:

@mui/material: 5.15.19
@emotion/cache: 11.14.0
@emotion/react: 11.14.0
@emotion/server: 11.11.0
@emotion/styled: 11.11.0

entry.server.tsx: using the default

entry.client.tsx: does some setup of hosting- and analytics-related variables, then performs the hydration via:

startTransition(() => {
    hydrateRoot(
        document,
        <StrictMode>
            <HydratedRouter />
        </StrictMode>
    );
});

React Router 7 config:

import type { Config } from '@react-router/dev/config';

export default {
    appDirectory: 'src',
    ssr: true,
} satisfies Config;

root.tsx

import createCache from '@emotion/cache';
// other imports removed for brevity

export const Layout = ({ children }: { children: React.ReactNode }) => (
    <html lang="en">
        <head>
            <!-- most meta/link tags removed for brevity -->
            <Meta />
            <Links />
        </head>
        <body>
            {children}
            <ScrollRestoration />
            <Scripts />
        </body>
    </html>
);

export default function createEmotionCache() {
    return createCache({ key: 'css' });
}

export async function clientLoader() {
    // Delay introduced for testing the rendering of styles in the HydrateFallback during client hydration
    return new Promise<{ store: EnhancedStore<unknown> }>((resolve, _) => {
        setTimeout(() => {
            resolve({ store: createReduxStore() });
        }, 25000);
    });
}
clientLoader.hydrate = true;

export function HydrateFallback() {
    const cache = createEmotionCache();
    const theme = getTheme();
    return (
        <CacheProvider value={cache}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                    <CircularProgress size={150} />
                    <Typography variant="h1">Loading...</Typography>
                </Box>
            </ThemeProvider>
        </CacheProvider>
    );
}

export default function Root() {
    const { x } = useLoaderData();
    const cache = createEmotionCache();
    const theme = getTheme();

    return (
        <Authenticator.Provider>
            <ReduxProvider store={store}>
                <CacheProvider value={cache}>
                    <ThemeProvider theme={theme}>
                        <CssBaseline />
                        <Outlet />
                    </ThemeProvider>
                </CacheProvider>
            </ReduxProvider>
        </Authenticator.Provider>
    );
}

Any help with unraveling this conundrum would be much appreciated!

alisrour37 · 2025-01-31T16:44:03Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

React Router 7 - HydrateFallback not rendering MUI/Emotion styles during client hydration? #12754

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

React Router 7 - HydrateFallback not rendering MUI/Emotion styles during client hydration? #12754

Uh oh!

Uh oh!

Jarbuckle Jan 15, 2025

Replies: 1 comment · 3 replies

Uh oh!

alisrour37 Jan 31, 2025

Uh oh!

Uh oh!

tannerhallman Feb 26, 2025

Uh oh!

Uh oh!

tannerhallman Feb 26, 2025

Uh oh!

OmarDronodat Apr 9, 2025

Jarbuckle
Jan 15, 2025

Replies: 1 comment 3 replies

alisrour37
Jan 31, 2025