Learn React & Material UI - #17 Server-Side Rendering

This video walks you through a server setup for a React SSR app with Material-UI. Using our exercise database SPA as a base, we will build up an Express server to render the app server-side and serve up an HTML payload along with critical CSS. As soon as the client loads up the HTML document, it will quickly display the webpage delivering that sweet and speedy first meaningful paint.

Once the app is viewable to the user, the browser will load up the JS bundle asynchronously behind the scenes without ever blocking the page render. Lastly, React will hydrate the server markup and attach event listeners to DOM nodes with no extraneous re-renders. That's when the user can finally start interacting with the app.

Learn the theory first (a must watch) https://youtu.be/8_RzRQXSHcg

Get the starter code from GitHub https://github.com/alex996/react-exercises/tree/ssr/starter

Markdown presentation notes https://github.com/alex996/react-exercises/tree/ssr/starter#readme

Final code after SSR refactor https://github.com/alex996/react-exercises/tree/ssr/final

Be sure to follow the video very closely. There are a myriad of SSR-related issues in Material-UI on GitHub, and almost all of them are closed because of integration or configuration mistakes on the part of the reporters. SSR setup with MUI is an delicate mater after all, so pay close attention! (I made a couple of typos myself, lol)

Server Rendering https://material-ui.com/guides/server-rendering/

Server Rendering with React and React Router v4 from Tyler https://youtu.be/mZEv4mHsU5E
(a very, very good SSR tutorial from ground up; I definitely recommend watching it)

CSR is already powered by Webpack, why not use it for SSR? Multiple targets to the rescue https://webpack.js.org/concepts/targets/#multiple-targets

Alternative setup with babel-node / babel-cli https://github.com/babel/example-node-server

Why we need to exclude deps when bundling https://jlongster.com/Backend-Apps-with-Webpack--Part-I

And if you want to get closer, follow me on Minds https://minds.com/CodeRealm