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.
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.