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 | ||
Related Courses
Are you interested in higher education?