Course Highlights
  • 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
Curriculum

5 Topics
A Few Notes
Course Resources
Join Our Community!
Why Server Side Rendering?
SSR Overview

9 Topics
App Overview
Server Architecture Approach
Starter Package.Json File
Boilerplate Setup
Express Setup
The RenderToString Function
JSX on the Server
Server Side Webpack
Breather and Review

7 Topics
Rebuilding and Restarting
Server Side Rendering Isomorphic Javascript Universal Javascript
Client Side JS
Client Bundles
The Public Directory
Why Client.js?
Client Bootup

4 Topics
Merging Webpack Config
Single Script Startup
Ignoring Files with Webpack
Renderer Helper

6 Topics
Implementing React Router Support
BrowserRouter vs StaticRouter
Route Configuration
HTML Mismatch
More on Route Configuration
Routing Tiers

9 Topics
The Users API
Four Big Challenges
Browser Store Creation
Server Store Creation
FetchUsers Action Creator
The Users Reducer
Reducer Imports
UsersList Component
Babel Polyfill

10 Topics
Detecting Data Load Completion
Solution #1 for Data Loading
Solution #2 for Data Loading
The React Router Config Library
Updating Route Uses
The MatchRoutes Function
LoadData Functions
Store Dispatch
Waiting for Data Load Completion
Breather and Review

7 Topics
The Page Approach
Refactoring to Pages
Refactoring Page Exports
Client State Rehydration
More on Client State Rehydration
Dumping State to Templates
Mitigating XSS Attacks

16 Topics
Authentication Issues
Authentication via Proxy
Why Not JWT's?
Proxy Setup
Renderer to API Communication
Axios Instances with Redux Thunk
Client Axios Instance
Server Axios Instance
The Header Component
Adding an App Component
Building the Header
Fetching Auth Status
Calling FetchCurrentUser
Connecting the Header
Header Customization
Header Styling

15 Topics
404 Not Found Pages
Implementing the NotFound Page
StaticRouter Context
The Admin Feature
Admins Action Creator and Reducer
Admins Route Component
Testing Admins Route
Promise.all Failures
Error Handling Solution #1
Error Handling Solution #2
Error Handling Solution #3
The Require Auth Component
Implementing Require Auth
Require Auth in Use
Handling Redirects

5 Topics
Meta Tags
Setting Tags with Helmet
React Helmet in Practice
Dynamic Title Tags
RenderToString vs RenderToNodeStream

1 Topic
Next Steps and Wrapup

1 Topic
Bonus!

  Write a Review

Server Side Rendering with React and Redux

Go to Paid Course