Server Side Rendering with React and Redux

Server Side Rendering with React and Redux

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 8 Hours | 906 MB

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

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
Table of Contents

Getting Started
1 A Few Notes
3 Why Server Side Rendering_
4 SSR Overview

Let’s Get Coding!
5 App Overview
6 Server Architecture Approach
8 Boilerplate Setup
9 Express Setup
10 The RenderToString Function
11 JSX on the Server
12 Server Side Webpack
13 Breather and Review

Server Configuration
14 Rebuilding and Restarting
15 Server Side Rendering_ Isomorphic Javascript_ Universal Javascript
16 Client Side JS
17 Client Bundles
18 The Public Directory
19 Why Client_js_
20 Client Bootup

Refactoring for Cleaner Code
21 Merging Webpack Config
22 Single Script Startup
23 Ignoring Files with Webpack
24 Renderer Helper

Adding Navigation
25 Implementing React Router Support
26 BrowserRouter vs StaticRouter
27 Route Configuration
28 HTML Mismatch
29 More on Route Configuration
30 Routing Tiers

Integrating Support for Redux
31 The Users API
32 Four Big Challenges
33 Browser Store Creation
34 Server Store Creation
35 FetchUsers Action Creator
36 The Users Reducer
37 Reducer Imports
38 UsersList Component
39 Babel Polyfill

Server Side Data Loading
40 Detecting Data Load Completion
41 Solution #1 for Data Loading
42 Solution #2 for Data Loading
43 The React Router Config Library
44 Updating Route Uses
45 The MatchRoutes Function
46 LoadData Functions
47 Store Dispatch
48 Waiting for Data Load Completion
49 Breather and Review

Organization with Page Components
50 The Page Approach
51 Refactoring to Pages
52 Refactoring Page Exports
53 Client State Rehydration
54 More on Client State Rehydration
55 Dumping State to Templates
56 Mitigating XSS Attacks

Authentication in a Server Side Rendering World
57 Authentication Issues
58 Authentication via Proxy
59 Why Not JWT’s_
60 Proxy Setup
61 Renderer to API Communication
62 Axios Instances with Redux Thunk
63 Client Axios Instance
64 Server Axios Instance
65 The Header Component
66 Adding an App Component
67 Building the Header
68 Fetching Auth Status
69 Calling FetchCurrentUser
70 Connecting the Header
71 Header Customization
72 Header Styling

Error Handling
73 404 Not Found Pages
74 Implementing the NotFound Page
75 StaticRouter Context
76 The Admin Feature
77 Admins Action Creator and Reducer
78 Admins Route Component
79 Testing Admins Route
80 Promise_all Failures
81 Error Handling Solution #1
82 Error Handling Solution #2
83 Error Handling Solution #3
84 The Require Auth Component
85 Implementing Require Auth
86 Require Auth in Use
87 Handling Redirects

Adding Better SEO Support
88 Meta Tags
89 Setting Tags with Helmet
90 React Helmet in Practice
91 Dynamic Title Tags
92 RenderToString vs RenderToNodeStream

Wrapup
93 Next Steps and Wrapup