Page refresh break styles on Nextjs production app

I got this issue when working with NextJS 9.4 with MaterialUI.

I got this warning in console whenever styles are broken

Warning: Prop className did not match. Server: "MuiBox-rootMuiBox-root-5" Client: "MuiBox-root MuiBox-root-1"in span (created by Styled(MuiBox))

This is how I fixed.

We need custom document.js and custom app.js as mentioned in MaterialUI NextJS example

Copy _document.js and _app.js from here https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages

to pages folder

Copy theme.js from https://github.com/mui-org/material-ui/tree/master/examples/nextjs/src and place it somewhere and update the import links in _document.js and _app.js

The styles should work now.

If modifying the app as suggested in Material-UI NextJS examples did not help, you can lazy load your component. This way you will force it to create styles only after the client-side is loaded.

Guide to disable SSR for a component: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'export const ComponentWithNoSSR = dynamic(() => import('./Component'), {  ssr: false,})

However, keep in mind that the component will lose all perks of SSR.

TLDR: You cannot use conditional rendering based on mobile breakpoint with Next.js since server side rendering does not have access to the dimensions of your browser. This explains the visual distortions on refresh. The only robust way to detect breakpoints with server side rendering is by using CSS media queries for hiding/unhiding mobile components.

According to this blog:

The server doesn’t recognize the window neither document. This means that the device, in other words, cannot detect obligatory properties (such as the viewport dimensions of the client) - thereby it needs to infer them someway, which means, a pretty limited and non-accurate way to respond.

For instance, imagine we’ve an application that uses matchMedia(which, as you probably know, is a Web API that arrives on top ofthewindow) to render components conditionally based on the viewportdimensions. How would you expect the server to render the markupwithout thewindow, and even if it’s hypothetically polyfilled somehow,what about the dimensions? How would it respond once the initialrender contains a responsive component that conditionally affected bya breakpoint?

Put it simply - this might cause the server to render our applicationincorrectly, which eventually, leads to partial hydration that patchesthe mismatches (namely potential bugs?).