SSR needs a default width to render the same as the client

Describe the bug When using SSR the returned html is different than the one generated by the client, That’s because of the conditional rendering like display={{md: "none", sm: "block"}} Is there a way to define the default width when one is not set? For example material-ui has an initialWidth that you can set on your theme, so the content that comes from the server is the same, in most cases.

 initialWidth: isMobile ? "sm" : "lg" // Breakpoint being globally set 🌎!

To know if it is mobile or a presumeably bigger monitor you can check the agent that is sent to the server. Actually it seems it is using mediaqueries for that, which is good, but then why does it generates 2 different classes? I will investigate more

Expected Behavior Code sent to the client from SSR should be the same as the one generated in the client.

[DevAlien]

Basically the extractCritical was the solution.

import { renderToString } from 'react-dom/server'
import { extractCritical } from 'emotion-server'
import App from './App'

const { html, ids, css } = extractCritical(renderToString(<App />))

an example on next.js => https://github.com/zeit/next.js/blob/master/examples/with-emotion/pages/_document.js

And the emotion documentation => https://emotion.sh/docs/ssr#extractcritical

[DevAlien]

Installing emotion and emotion-server and setting it up solved the issue.

https://emotion.sh/docs/ssr