mui-ssr.md

Material-UI - Server-side Rendering (SSR)

Render the React app on the server, and boot it up on the client.

Why

• faster first meaningful paint
  • initial render much quicker (ex: 10s vs. 3s on slow 3G)
• better SEO (search engine optimization)

How

• client sends a GET request to the server
• server renders the component tree into an HTML string
• it extracts critical CSS and injects it inline
• it sends off HTML & CSS as a response to the client
• client paints the page with HTML & CSS and loads JS async (viewable)
• once JS is loaded, React
  • hydrates server-rendered markup, and
  • attaches event listeners to existing markup (interactive)

Build Setup

• have to transpile JSX server-side preset-react
• might as well use import (ESM) and transpile to require (CJS)
• for dev, could use @babel/node to compile on the fly in memory
• for prod, could use @babel/cli to precompile our code for execution
• might as well bundle with webpack since it's already part of build setup

Integration

Server

• JssProvider
  • sheets registry: SheetsRegistry
  • class name generator: createGenerateClassName
• MuiThemeProvider
  • theme instance: createMuiTheme
  • sheets manager: Map

Client

• JssProvider
  • class name generator: createGenerateClassName
• MuiThemeProvider
  • theme instance: createMuiTheme

Caveats

Integration is a very intricate procedure! You must make sure to

• provide a new sheets manager on each request
• provide a new class name generator on each request
• use JssProvider with a class name generator on the client
• use the same version of material-ui on the client & server