Learn how to build a working project with a Client-Side React application, and a Server Side Express application.
Read more.Instructor
Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout 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 |