# 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