Note: use this branch along with its companion video to migrate from SPA to SSR. For the latest code, see master branch.
Render the React app on the server, and boot it up on the client.
- faster first meaningful paint
- initial render much quicker (ex: 10s vs. 3s on slow 3G)
- better SEO (search engine optimization)
- client sends a
GETrequest to the server - server renders the component tree into an
HTMLstring - it extracts critical
CSSand injects it inline - it sends off
HTML&CSSas a response to the client - client paints the page with
HTML&CSSand loadsJSasync (viewable) - once
JSis loaded, React- hydrates server-rendered markup, and
- attaches event listeners to existing markup (interactive)
- have to transpile
JSXserver-sidepreset-react - might as well use
import(ESM) and transpile torequire(CJS) - for dev, could use
@babel/nodeto compile on the fly in memory - for prod, could use
@babel/clito precompile our code for execution - might as well bundle with
webpacksince it's already part of build setup
JssProvider- sheets registry:
SheetsRegistry - class name generator:
createGenerateClassName
- sheets registry:
MuiThemeProvider- theme instance:
createMuiTheme - sheets manager:
Map
- theme instance:
JssProvider- class name generator:
createGenerateClassName
- class name generator:
MuiThemeProvider- theme instance:
createMuiTheme
- theme instance:
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
JssProviderwith a class name generator on the client - use the same version of
material-uion the client & server