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!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

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

Jarbuckle Jan 15, 2025

Replies: 0 comments

Jarbuckle
Jan 15, 2025