CF

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 is one of the longest-running and most prolific instructors on Udemy, with a catalog covering essentially every major JavaScript framework, plus Docker, Kubernetes, AWS, and the broader full-stack development landscape. His teaching style is patient and project-oriented — most of his courses are structured around building a substantial application from scratch rather than working through disconnected tutorial examples.

The catalog covers React, Redux, Next.js, Vue, Angular, GraphQL, Node.js, Docker / Kubernetes, AWS infrastructure, React Native and Flutter for mobile, the algorithm / data-structure interview prep track, and the modern TypeScript / Bun / Rust adjacent material that working JavaScript developers increasingly encounter. Few independent instructors have maintained Stephen's breadth this consistently for this long.

The CourseFlix listing under this source carries over 25 Stephen Grider courses spanning that range. Material is paid; Stephen Grider courses are typically sold individually on Udemy. Courses are aimed primarily at developers picking up a specific technology through working through a complete project.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What is Server Side Rendering with React and Redux about?
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…
Who teaches this course?
It is taught by Stephen Grider, Udemy. You can find more courses by these instructors on the corresponding source pages.
How long is the course?
It contains 91 lessons with a total runtime of 8 hours 14 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/server-side-rendering-with-react-and-redux. The page hosts every lesson with the integrated video player; no download is required.