Server Side Rendering with React and Redux

8h 14m 30s
English
Paid

Take your React and Redux skills to the next level! This course will teach you how to integrate the highly-regarded React v16, Redux, React Router, and Express to construct a server-side-rendered web application. Designed with a 'learn-by-doing' approach, you can expect hands-on coding examples and practical applications instead of traditional lectures. By building a comprehensive application, we will explore the challenges of server side rendering using these powerful technologies.

Course Overview

By applying each concept to a real-world app, you will gain a deeper understanding of when to utilize each unique feature effectively. Have you wondered why server side rendering courses are rare? While some blog posts offer limited insights, few resources provide a comprehensive view of server side rendering from start to finish. This course is the most complete resource online for mastering the complexities and solutions of server side rendering techniques, equipping you with the knowledge to implement them in your applications.

Learning Objectives

  • Discover the architectural considerations for server side rendered applications.
  • Connect a Webpack-powered front-end and back-end seamlessly.
  • Communicate data from the server to client using Redux initial state in your React application.
  • Secure your application against common XSS attacks related to state rehydration.
  • Navigate user requests with React Router on the front end and Express on the back end.
  • Appropriately handle errors and redirects during the server rendering process.
  • Implement cookie-based authentication throughout server rendering.
  • Understand the limitations of JWT's in server rendered environments.
  • Improve authentication flows using Google OAuth authentication.

This course is designed with the order and depth of content I wished for while learning server side rendering, ensuring you not only comprehend but can also apply these concepts effectively.

Course Requirements

This course isn't tailored for beginners. To benefit, you should already be familiar with React, Redux, React Router, and Express.

Target Audience

  • Engineers aiming to create apps with robust server side rendering.
  • Engineers seeking to understand the complexities of Isomorphic JavaScript.

What You'll Learn

  • Grasp the nuances and challenges of Server Side Rendering.
  • Develop a server side rendering boilerplate project.
  • Employ React, Redux, and React Router to enhance SEO.
  • Master server-side data loading techniques.
  • Design scalable server architectures for large applications.

About the Authors

Stephen Grider

Stephen Grider thumbnail
Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 91 lessons

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
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