Server Side Rendering with React and Redux

Name: Server Side Rendering with React and Redux
Price: 9 USD
Availability: InStock

8h 14m 30s

English

Paid

September 25, 2024

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 Server Side Rendering with React and Redux

Join premium to watch

Go to premium

#	Title	Duration
1	A Few Notes	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