Server Side Rendering with React and Redux

8h 14m 30s
English
Paid

Course description

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.  

Read more about the course

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.

Requirements:
  • This is not a beginner course. You must be familiar with React, Redux, React Router, and Express
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

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 91 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Server Side Rendering with React and Redux

0:00
/
#1: A Few Notes

All Course Lessons (91)

#Lesson TitleDurationAccess
1
A Few Notes Demo
01:45
2
Why Server Side Rendering?
05:29
3
SSR Overview
06:05
4
App Overview
04:07
5
Server Architecture Approach
08:47
6
Boilerplate Setup
02:49
7
Express Setup
05:00
8
The RenderToString Function
05:05
9
JSX on the Server
10:42
10
Server Side Webpack
05:05
11
Breather and Review
02:07
12
Rebuilding and Restarting
07:00
13
Server Side Rendering, Isomorphic Javascript, Universal Javascript
05:53
14
Client Side JS
04:36
15
Client Bundles
08:43
16
The Public Directory
05:32
17
Why Client.js?
06:53
18
Client Bootup
05:15
19
Merging Webpack Config
08:27
20
Single Script Startup
04:46
21
Ignoring Files with Webpack
06:21
22
Renderer Helper
04:05
23
Implementing React Router Support
03:05
24
BrowserRouter vs StaticRouter
05:09
25
Route Configuration
03:35
26
HTML Mismatch
04:55
27
More on Route Configuration
06:19
28
Routing Tiers
02:57
29
The Users API
05:22
30
Four Big Challenges
08:29
31
Browser Store Creation
03:25
32
Server Store Creation
07:33
33
FetchUsers Action Creator
03:14
34
The Users Reducer
03:13
35
Reducer Imports
02:01
36
UsersList Component
06:04
37
Babel Polyfill
03:42
38
Detecting Data Load Completion
04:36
39
Solution #1 for Data Loading
07:06
40
Solution #2 for Data Loading
04:40
41
The React Router Config Library
05:58
42
Updating Route Uses
03:38
43
The MatchRoutes Function
03:27
44
LoadData Functions
10:49
45
Store Dispatch
06:54
46
Waiting for Data Load Completion
03:14
47
Breather and Review
04:57
48
The Page Approach
02:55
49
Refactoring to Pages
02:09
50
Refactoring Page Exports
04:46
51
Client State Rehydration
04:44
52
More on Client State Rehydration
05:28
53
Dumping State to Templates
07:47
54
Mitigating XSS Attacks
08:33
55
Authentication Issues
05:05
56
Authentication via Proxy
04:53
57
Why Not JWT's?
05:38
58
Proxy Setup
06:25
59
Renderer to API Communication
05:07
60
Axios Instances with Redux Thunk
04:53
61
Client Axios Instance
04:54
62
Server Axios Instance
08:15
63
The Header Component
03:17
64
Adding an App Component
07:41
65
Building the Header
02:33
66
Fetching Auth Status
06:13
67
Calling FetchCurrentUser
03:35
68
Connecting the Header
06:13
69
Header Customization
10:33
70
Header Styling
05:46
71
404 Not Found Pages
02:58
72
Implementing the NotFound Page
03:00
73
StaticRouter Context
08:59
74
The Admin Feature
02:10
75
Admins Action Creator and Reducer
03:31
76
Admins Route Component
04:33
77
Testing Admins Route
04:25
78
Promise.all Failures
06:20
79
Error Handling Solution #1
06:17
80
Error Handling Solution #2
06:33
81
Error Handling Solution #3
07:55
82
The Require Auth Component
04:02
83
Implementing Require Auth
08:58
84
Require Auth in Use
04:57
85
Handling Redirects
04:13
86
Meta Tags
04:16
87
Setting Tags with Helmet
06:13
88
React Helmet in Practice
06:43
89
Dynamic Title Tags
05:31
90
RenderToString vs RenderToNodeStream
14:09
91
Next Steps and Wrapup
02:30

Unlock unlimited learning

Get instant access to all 90 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Data Fetching: Beyond the Basics

React Data Fetching: Beyond the Basics

Sources: fullstack.io
This course will teach you how to efficiently load data in React without using third-party libraries or the useEffect hook. We will create our own library for..
2 hours 40 minutes 15 seconds
Classic React

Classic React

Sources: Build UI
The best course in the world to take you from zero to enterprise grade React. Stop reading out-of-date tutorials and watching crappy screen-share videos. We use a linear approac...
4 hours 10 minutes 15 seconds
React Redux Ecommerce - Master MERN Stack Web Development

React Redux Ecommerce - Master MERN Stack Web Development

Sources: udemy
Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you wa...
43 hours 9 minutes 35 seconds
React Query

React Query

Sources: ui.dev (ex. Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There’s an easier way to master React Query. Our linear course is like having a smart, experienced...
7 hours 1 minute 30 seconds
Starting with React & Redux: Build modern apps (2nd edition)

Starting with React & Redux: Build modern apps (2nd edition)

Sources: udemy
We will start from beginning to actually building a few applications.You will learn all the logic and practice behind React in different modules, and as we adva
30 hours 13 minutes 51 seconds