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

Publicado el: 26 octubre 2023
en el canal de: Codeching
4,110
65

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


En esta página del sitio puede ver el video en línea Implement server-side rendering (SSR) in React 18 using Pipeable Stream in NodeJS – step by step de Duración hora minuto segunda en buena calidad , que subió el usuario Codeching 26 octubre 2023, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 4,110 veces y le gustó 65 a los espectadores. Disfruta viendo!