Implement server-side rendering (SSR) in React 18 using Pipeable Stream in NodeJS – step by step

hey guys my name is lber welcome to my channel coaching today I would like to show you that how you can use the server side rendering technique with react 18 when you are using a traditional single page application which is built and also uh loaded inside your browser then the components are rendered on the client side inside your browser and the whole HTML content is produced by your application on the client side in the browser but uh with the server side rendering Technique we can do it on the server side so we we are able to uh render the react application for example on the server side inside the nojas application for example and uh we can produce the whole HTML content on the server side and we can send it to the client side I had a server side rendering uh solution tutorial uh few years ago but since react 18 is out we can have different approach first why server side rendering is good because for example the search engine robots can cat your websites um easily because the content will be there when the page is loading loaded uh it's a more faster and smoother solution from the user experience point of view uh and overall it's a it's a faster solution so but in the old way previous L the nodejs had to wait for the whole content to be to be produced by the nodejs application because before it could send it to the client side now we will using uh pipeable stream we will use the render pipeable stream function with this function we are able to stream our components to the client side as soon as they are ready it's a more smoother solution faster because because the components will be able to be rendered on the client side as soon as they are ready so let's get started and check out that how it's working okay let's start in an empty folder and First Call npm in it to initialize a nodejs application okay my application is initialized here you can see the package. Json I'm just replacing this description with a more appropriate one for me okay let's create an empty bootstrap.js file we will use it later okay now I'm creating a react react application with MPX create react app tool and I'm calling it SSR D client here we go our react application generated here is it its package uh Json file and now I'm moving these dependencies to the main uh main package.json I'm installing Express first and I'm putting this react dependencies into the dependencies section here okay I'm calling mpm install now and I'm removing this main uh property from here we don't need it now and I am placing the workspaces section here and I putting the SSR D client uh workspace into the array and I'm defining the scripts first the start uh server we call the bootstrap Js node and I'm defining the start client for this I'm installing the cross M package I'm using cross to start the application on Port 3008 and I'm calling mpm start and I'm passing the SSR client workspace as a perimeter and also for the build I have build client and now I'm installing the Bible uh dependencies versus the plugin syntax dynamic import we will be used inside nodejs and also I'm installing preset M from bble and preset react and also I'm installing the bubble register and the bubble plug-in Dynamic import node and the last one is the ignore Styles now please uh open the react app.js file we will prepare our react application now the client side application so the first thing is to create a new file named cars. GS inside this JS file we will have cars component also create the CSS file for it we are defining a simple CSS for the root and we will have a H2 uh definition here inside the JS file we are importing the CSS and we are creating div with root class and also a car list and the header using H2 and we have four cars here inside this list we exporting this component and we are using we were using it here we lazy load this component inside the appjs so we are using lazy from the react package the next thing is to create a loading screen we will use suspense and until our component is not ready we will uh show loading uh uh text and here we are using the suspense the full back component is the loading screen and inside this we are putting a header with this text for example and we are putting the cards component here okay the CSS of application looks like this one it's not so important so I will be fast you can copy it from the Repository now create a new file named app SSR GS this will be used on the nodejs side on the server side we will render this component it has a property uh bootstrap CSS which is a list of strings we will pass uh file names CSS file names to this component and and it will put it in put them to the header U you can set the title The Meta tags and everything and here we map through this list and put the link definition using the pets here and we have a body we have the root div and we pass the app component inside of the div rout here we go now we can test our client side application so we can call npm Run start client and you can see here it's running on the port 38 one moment and now it started here you can can see the application the running application and it's a traditional way so we are running our client side application inside the browser so when the First Response arrives then we can see here the that the root div is empty and it's populated by the client side application inside your browser and now we will create the server side rendering functionality so so open the bootstrap.js file and we will set up our bubble config here so we require ignore Styles because in this tutorial we are not rendering the CSS we just we will just using the builded CSS and we will inject them to the header but the with the bubble register we are registering preset and set react and also we are uh configuring the plugins so put these plugins here as well we will use Dynamic Imports inside noes so we we need them you can copy the package names from the package.json file I'm stopping my client side application be because we want need it anymore in this form and require server.js we will write the server.js file uh soon so create this file the main thing will happen here and the first thing is to import everything we will need so react react do server path the app SSR component from the client uh folder and exper Express and Fs with Express we we are able to create a web server so we are set up uh this uh Express here I will have two list of file names here first is the bootstrap scripts and bootstrap CSS um here I set up a static pets route for this one uh please build the client side application so call mpm run build client it will produce the static JS and CSS files and for server side rendering we will need the first main JS that is uh that is cont that contains the the starting point so okay this is the static path which contains the static files also please uh put uh in the client side react applications J package Json this homepage property and set it to do/ sr- client SL build because uh the rout will be the node application but when the browser want to load the static files it it will look it into this folder okay so now I'm creating a function that will uh find the file names of the static JS and CSS files and it will put these file names into the two array constant so you can see here the main JS file we will need it so I filter the file name we start with main Dot and ends withjs okay and in case of the CSS we will need all okay I'm calling this function to to have the bootstrap scripts and bootstrap CSS file names okay and now we will write the main thing the server side rendering we are defining the main route it's a slash root and inside of this first we writing socket on error if we will have any error and we are writing this FAL error text here I'm defining the error by default is false and we will set it through in case of any error during the streaming okay and here we are using the react doome server. render to pip stream function the first parameter is the component it's the app SSR component that we created before we pass in the the bootstrap CSS file names and the second parameter is an option or uh option object and uh we pass in the bootstrap scripts it will inject uh these uh scripts as in a script tag uh in the browser and in the on share ready we are setting the status code which which is 500 in case of error and 200 in case of okay in case of any other case basically here in this tutorial and uh we are setting the header which is text/html and uh we are calling stream. pipe and we are passing in the response okay the second thing is the on error in case of this we are setting the did error uh variable to true and we are conso log the error itself okay now we are defining another route for the static files they could be found on this path and we are using express. static this is important to be able to load the static files in the browser so and we are calling appon on the port and it will uh start our application okay now go to the index.js of the client react application and we will use the Hy rate here so right react Dome client. hydrate the hydration is a method that will only attach the the events on the Dome elements on the browser and won't render the react components again so when the client gets the content from the server side uh the hydration will only attach the required the required uh event handlers on the Dom elements and won't render the whole uh component again now we can start our application so call mpm uh run server and here you can see that Don Port 2 uh 3009 my nodejs application is running and here you can see that the server side rendering is working so we have the whole content here coming in the first request uh response and also the bootstrap script is good uh is here you can find the main script uh and the other script is loaded by this lazy loading so the main script injected and the main script uh loading the other scripts that required so here you can find this chunk is loaded by the main script but the main content is here rendered by the server sign and arriving to the browser with the first first request response and also the CSS in injected in the header um so everything is working as expected um here you can see the final Dome the scripts in the body and in the header you can find the other chunks which is loaded by the main script and also the CSS that was injected by Us in the app SSR component um yes everything everything is ready I think here you can see the official documentation and here you can see that for example the render to pipe P stream the node react node perimeter uh should be a component that should render the HTML tug itself for example um here you can see an example and now check the logs here you can see three uh conso log but if I reload the page we have one more so the conso log is working on the server side this console log is coming from our react component app SSR component injects our original app component which uh laser loading the cars component and inject it in its in its uh children and here is the list and finally you can see here that it was rendered on the server side and if I open the original uh Source you can see here that the content is here all the cars and everything so server s rendering was successful okay thank you very much for watching it was my tutorial about the Ser side rendering solution inside react 18 if you like this tutorial please subscribe to my YouTube channel you will find many interesting tutorials on this channel in the future as well please press the like button if you like this tutorial and uh thanks again have a nice day [Music] bye

Channel: Codeching

Views: 1,190

Keywords: server-side rendering, React, SSR, Context API, SSR i18n, i18next, SSR StaticRouter, staticRouter, BrowserRouter SSR, backend, frontend, Express, server-side router react, I18NextProvider, pipeable stream, suspense, lazy, React 18, React 18 SSR, React 18 server-side rendering, React stream ssr, React SSR streaming, React SSR Stream

Id: bYFfm2Vgml0

Length: 21min 25sec (1285 seconds)

Published: Thu Oct 26 2023