React Server Side Rendering
Build React, Redux and React Router V6 app using Server Side Rendering (SSR)
Development,Web Development,React JS
Lectures -33
Duration -2.5 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
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 the 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.
Goals
Our goals:
- 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
Prerequisites
Prerequisites:
- This course is not for beginners
- You must have experience with React, NodeJS, Express, Webpack
![React Server Side Rendering React Server Side Rendering](https://d3mxt5v3yxgcsr.cloudfront.net/courses/9253/course_9253_image.jpeg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Introduction
1 Lectures
-
Introduction 01:47 01:47
Client-side configuration
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Server-side configuration
6 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Fetch data
18 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Search engine optimisation
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Maksym Rudnyi](https://www.tutorialspoint.com/assets/profiles/223383/profile/200_289044-1595444228.png)
Maksym Rudnyi
Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.
I would like to share my experience with others. You can find courses in Web Development (Front-end and Back-end) and specifically JavaScript. Use this knowledge to improve yourself as a professional developer.
Keep learning!
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)