Please ensure Javascript is enabled for purposes of website accessibility
Build React, Redux And React Router V6 App Using Server Side Rendering
0( 0 REVIEWS )
2 STUDENTS
2h 43m
Maksym
Maksym

Learn how to build a working project with a Client-Side React application, and a Server Side Express application.

Read more.
Course Skill Level
Advanced
Time Estimate
2h 43m

Instructor

Maksym
Maksym

Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.


Only want this course? Buy this course for $199 $29 and keep lifetime access. Click here

About This Course

Who this course is for:

  • Developers looking to build apps with Server Side Rendering (SSR)
  • Engineers who wants to improve Search Engine Optimisation (SEO) of the single-page apps (SPA)

What you’ll learn: 

  • Understand what is SSR
  • How to build the project from scratch
  • Use React, Redux, React Router v6
  • Implement best practices of SEO
  • Implement the different techniques to fetch data on the server
  • Learn how to use React to solve the first page download problem that SPAs have

Requirements: 

  • You must have experience with React, NodeJS, Express, and Webpack

Software version used in the course:

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

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.

Our Promise to You

By the end of this course, you will have understood what Server Side-Rendering is. 

10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked. 

Get started today!

Course Curriculum

Section 1 - Introduction
Introduction 00:00:00
Section 2 - Client-Side configuration
Create React Application 00:00:00
Configure Babel 00:00:00
Configure Webpack 00:00:00
Run React Client-Side Rendering Application 00:00:00
Section 3 - Server-Side Configuration
Run NodeJS Server 00:00:00
Implement Simple Server-Side Rendering 00:00:00
Import CSS 00:00:00
ReactDOM.Hydrate 00:00:00
React-Router-Dom. Create Pages 00:00:00
Server-Side Rendering For Different Pages 00:00:00
Section 4 - Fetch Data
Fetch Data With Axios 00:00:00
React-Router-Config 00:00:00
Redux Action 00:00:00
Redux Reducer 00:00:00
Update Index.Dev.Js 00:00:00
Fetch Data With Redux 00:00:00
LoadData Function 00:00:00
Fetch Data In Advance 00:00:00
Create Renderer Method 00:00:00
Implement SSR For Prefetched Data 00:00:00
Fix Error And Run SSR 00:00:00
Generate MovieDB API Key 00:00:00
Update Actions 00:00:00
Update The View 00:00:00
Update Home Page 00:00:00
Update Post Page View 00:00:00
Fix SSR For The Post Page 00:00:00
Fix Post Page Loading 00:00:00
Section 5 - Search Engine Optimisation
Implement 404 Page 00:00:00
React-Helmet Server-Side Part 00:00:00
React-Helmet Client-Side 00:00:00
Bonus 00:00:00