gist about server side render explained really simple work

server side render video

https://www.youtube.com/watch?v=gpGoxdVspx4&index=17&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk

"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://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Falex996%2Freact-exercises%2Ftree%2Fssr%2Fstarter&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

Markdown presentation notes https://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Falex996%2Freact-exercises%2Ftree%2Fssr%2Fstarter%23readme&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

Final code after SSR refactor https://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Falex996%2Freact-exercises%2Ftree%2Fssr%2Ffinal&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

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://www.youtube.com/redirect?q=https%3A%2F%2Fmaterial-ui.com%2Fguides%2Fserver-rendering%2F&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

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://www.youtube.com/redirect?q=https%3A%2F%2Fwebpack.js.org%2Fconcepts%2Ftargets%2F%23multiple-targets&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

Alternative setup with babel-node / babel-cli https://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Fbabel%2Fexample-node-server&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

Why we need to exclude deps when bundling https://www.youtube.com/redirect?q=https%3A%2F%2Fjlongster.com%2FBackend-Apps-with-Webpack--Part-I&event=video_description&redir_token=PmVqrhdNs8kMEvnVPqmZKLM9H398MTU0ODg0NDMwMkAxNTQ4NzU3OTAy&v=gpGoxdVspx4

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