Implement server-side rendering (SSR) in React 18 using Pipeable Stream in NodeJS – step by step
In this tutorial I show you that how you can use the SSR (server-side rendering) technique to be able to render a React 18 client application on the server side (node js). We will use a Pipeable Stream to stream the components to the client side as soon as they are ready. It provides a smooter solution versus the old way where node application had to wait the full HTML content to be produced before it could send the content to the client. From the user perspective it's a faster and smooter solution. The user can see content much more earlier. We will also use lazy loading for a component and Suspense too in the React application. Suspense is now working along with SSR in React after version 18.
The final source code repository could be found here: https://gitlab.com/codeching/react-18...
00:00 - Intro
02:21 - Setting up the project (server and client side - workspaces)
05:34 - Writing the front-end React application - components
08:34 - Testing the front-end application
09:38 - Writing the Node.js application (babel, SSR)
14:59 - Writing the main server-side rendering function (pipeable stream)
17:20 - Hydration
17:59 - Testing the whole server-side rendered Node.js application
20:46 - Outro
#react #nodejs #serversiderendering
