DevCourseWeb.com    Tutorials    Development    React Server Side Rendering

React Server Side Rendering

 Admin0,

Build React, Redux and React Router V6 app using Server Side Rendering (SSR)

Note: This course assumes you’ve some basic experience with React, Redux, and Express.

What you’ll learn

  • Understand what is Server Side Rendering (SSR).
  • How to build the project from the scratch.
  • Use React, Redux, React Router v6.
  • Implement best practices of Search Engine Optimisation (SEO).
  • Implement the different techniques to fetch data on the server.
  • Learn how to use React to solve the first page download problem that single-page apps (SPAs) have.

Course Content

  • Introduction –> 1 lecture • 2min.
  • Client-side configuration –> 4 lectures • 22min.
  • Server-side configuration –> 6 lectures • 40min.
  • Fetch data –> 18 lectures • 1hr 23min.
  • Search engine optimisation –> 4 lectures • 22min.

Auto Draft

Requirements

Note: This course assumes you’ve some basic experience with React, Redux, and Express.

Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

 

Learn how to use React to solve the first-page download problem that single-page apps (SPAs) have. You’ll see how to easily build high-performance web apps that implement Server-Side Rendering (SSR) on every landing page using React v17, Redux v4, React Router v6, and Express.

 

Here’s what you will learn:

  • Learn the architectural considerations of building a Server-Side rendered app;
  • Configure Webpack on the front-end and back-end app together;
  • Communicate data from your server to client using Redux initial state to your React application
  • Understand how to route user requests on the front end with React Router and on the backend with Express
  • Handle errors and redirects properly that occur during the server rendering process

 

At the end of this tutorial, you will have a working project with a Client-Side React application and a Server Side Express application.

 

This course was verified with Node v16.0.0, npm v7.10.0, react v17.0.1, redux v4.1.2, react-router-dom v6.2.1, @babel/core v7.12.9, webpack v5.10.0, express v4.17.2.

 

Get Tutorial