Server Side Rendering With React And Redux

Tags: React

Build React, Redux, and React Router apps using Server Side Rendering (SSR), Isomorphic, and Universal JS techniques

Last updated 2022-01-10 | 4.7

- Understand the challenges of Server Side Rendering
- Build a server side rendering boilerplate project
- Use React
- Redux
- and React Router to conquer Search Engine Optimization

What you'll learn

Understand the challenges of Server Side Rendering
Build a server side rendering boilerplate project
Use React
Redux
and React Router to conquer Search Engine Optimization
Master techniques for data loading on the server
Construct server architectures that can easily scale for large apps

* Requirements

* This is not a beginner course. You must be familiar with React
* Redux
* React Router
* and Express

Description

Note: This course assumes you've got the basics of React, Redux, and Express down.  Check out my course 'Node with React', its the perfect preparation!

Go beyond the basics of React and Redux!  This course will teach you to combine the ultra-popular React v16, Redux, React Router, and Express technologies to build a server-side-rendered web application.

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples.  In this course we'll build one application that profiles the challenges of server side rendering with React, Redux, React Router, and Express.  By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

Ever wonder why there are so few courses online that teach server side rendering techniques?  Sure, there are blog posts that show a tiny portion of a server side rendered app, but there are nearly no resources online to give you the full server side rendering experience from start to finish.  This course is the most complete resource online for learning about exactly why server side rendering is so challenging.  You'll learn the biggest hurdles, along with multiple solutions to each major problem, giving you the toolset you need to tackle server side rendering techniques in your own applications.

Here's what we'll learn:

  • Learn the architectural considerations of building a server side rendered app
  • Connect a Webpack-powered front and and backend app together
  • Communicate data from your server to client using Redux initial state to your React application
  • Secure your application from common XSS attacks caused by state rehydration
  • 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
  • Authenticate your users with cookie-based authentication during the server rendering phase
  • Understand why JWT's are not appropriate for use in a server rendered app
  • Enhance authentication flows in your app with Google OAuth authentication

I've built the course that I would have wanted to take when I was learning to build server side rendered apps. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who this course is for:

  • Engineers looking to build new apps with server side rendering
  • Engineers who wants to understand the challenges of Isomorphic Javascript

Course content

13 sections • 95 lectures

A Few Notes Preview 01:44

Course Resources Preview 00:38

Join Our Community! Preview 00:07

Why Server Side Rendering? Preview 05:28

SSR Overview Preview 06:04

App Overview Preview 04:06

Server Architecture Approach Preview 08:46

Starter Package.Json File Preview 00:31

Boilerplate Setup Preview 02:48

Express Setup Preview 04:59

The RenderToString Function Preview 05:03

JSX on the Server Preview 10:41

Server Side Webpack Preview 05:04

Breather and Review Preview 02:06

Rebuilding and Restarting Preview 06:59

Server Side Rendering, Isomorphic Javascript, Universal Javascript Preview 05:52

Client Side JS Preview 04:35

Client Bundles Preview 08:42

The Public Directory Preview 05:31

Why Client.js? Preview 06:52

Client Bootup Preview 05:14

Merging Webpack Config Preview 08:26

Single Script Startup Preview 04:45

Ignoring Files with Webpack Preview 06:20

Renderer Helper Preview 04:04

Implementing React Router Support Preview 03:04

BrowserRouter vs StaticRouter Preview 05:08

Route Configuration Preview 03:34

HTML Mismatch Preview 04:54

More on Route Configuration Preview 06:18

Routing Tiers Preview 02:56

The Users API Preview 05:21

Four Big Challenges Preview 08:28

Browser Store Creation Preview 03:24

Server Store Creation Preview 07:32

FetchUsers Action Creator Preview 03:13

The Users Reducer Preview 03:12

Reducer Imports Preview 02:00

UsersList Component Preview 06:02

Babel Polyfill Preview 03:41

Detecting Data Load Completion Preview 04:35

Solution #1 for Data Loading Preview 07:05

Solution #2 for Data Loading Preview 04:38

The React Router Config Library Preview 05:57

Updating Route Uses Preview 03:37

The MatchRoutes Function Preview 03:26

LoadData Functions Preview 10:48

Store Dispatch Preview 06:52

Waiting for Data Load Completion Preview 03:13

Breather and Review Preview 04:56

The Page Approach Preview 02:54

Refactoring to Pages Preview 02:08

Refactoring Page Exports Preview 04:45

Client State Rehydration Preview 04:43

More on Client State Rehydration Preview 05:27

Dumping State to Templates Preview 07:46

Mitigating XSS Attacks Preview 08:32

Authentication Issues Preview 05:04

Authentication via Proxy Preview 04:52

Why Not JWT's? Preview 05:37

Proxy Setup Preview 06:24

Renderer to API Communication Preview 05:06

Axios Instances with Redux Thunk Preview 04:52

Client Axios Instance Preview 04:53

Server Axios Instance Preview 08:14

The Header Component Preview 03:16

Adding an App Component Preview 07:40

Building the Header Preview 02:32

Fetching Auth Status Preview 06:12

Calling FetchCurrentUser Preview 03:33

Connecting the Header Preview 06:12

Header Customization Preview 10:32

Header Styling Preview 05:45

404 Not Found Pages Preview 02:57

Implementing the NotFound Page Preview 02:59

StaticRouter Context Preview 08:58

The Admin Feature Preview 02:09

Admins Action Creator and Reducer Preview 03:30

Admins Route Component Preview 04:32

Testing Admins Route Preview 04:24

Promise.all Failures Preview 06:19

Error Handling Solution #1 Preview 06:16

Error Handling Solution #2 Preview 06:31

Error Handling Solution #3 Preview 07:54

The Require Auth Component Preview 04:01

Implementing Require Auth Preview 08:57

Require Auth in Use Preview 04:56

Handling Redirects Preview 04:12

Meta Tags Preview 04:15

Setting Tags with Helmet Preview 06:12

React Helmet in Practice Preview 06:42

Dynamic Title Tags Preview 05:30

RenderToString vs RenderToNodeStream Preview 14:08