4.72 out of 5
4.72
3157 reviews on Udemy

Server Side Rendering with React and Redux

Build React, Redux, and React Router apps using Server Side Rendering (SSR), Isomorphic, and Universal JS techniques
Instructor:
Stephen Grider
21,038 students enrolled
English [Auto] More
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

Note: This course assumes you’ve got the basics of React, Redux, and Express down.  Check out my course ‘Node with React’, its the perfect preparation!

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

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.

Getting Started

1
A Few Notes
2
Join Our Community!
3
Link to Github Repo
4
Why Server Side Rendering?
5
SSR Overview

Let's Get Coding!

1
App Overview
2
Server Architecture Approach
3
Starter Package.Json File
4
Boilerplate Setup
5
Express Setup
6
The RenderToString Function
7
JSX on the Server
8
Server Side Webpack
9
Breather and Review

Server Configuration

1
Rebuilding and Restarting
2
Server Side Rendering, Isomorphic Javascript, Universal Javascript
3
Client Side JS
4
Client Bundles
5
The Public Directory
6
Why Client.js?
7
Client Bootup

Refactoring for Cleaner Code

1
Merging Webpack Config
2
Single Script Startup
3
Ignoring Files with Webpack
4
Renderer Helper

Adding Navigation

1
Implementing React Router Support
2
BrowserRouter vs StaticRouter
3
Route Configuration
4
HTML Mismatch
5
More on Route Configuration
6
Routing Tiers

Integrating Support for Redux

1
The Users API
2
Four Big Challenges
3
Browser Store Creation
4
Server Store Creation
5
FetchUsers Action Creator
6
The Users Reducer
7
Reducer Imports
8
UsersList Component
9
Babel Polyfill

Server Side Data Loading

1
Detecting Data Load Completion
2
Solution #1 for Data Loading
3
Solution #2 for Data Loading
4
The React Router Config Library
5
Updating Route Uses
6
The MatchRoutes Function
7
LoadData Functions
8
Store Dispatch
9
Waiting for Data Load Completion
10
Breather and Review

Organization with Page Components

1
The Page Approach
2
Refactoring to Pages
3
Refactoring Page Exports
4
Client State Rehydration
5
More on Client State Rehydration
6
Dumping State to Templates
7
Mitigating XSS Attacks

Authentication in a Server Side Rendering World

1
Authentication Issues
2
Authentication via Proxy
3
Why Not JWT's?
4
Proxy Setup
5
Renderer to API Communication
6
Axios Instances with Redux Thunk
7
Client Axios Instance
8
Server Axios Instance
9
The Header Component
10
Adding an App Component
11
Building the Header
12
Fetching Auth Status
13
Calling FetchCurrentUser
14
Connecting the Header
15
Header Customization
16
Header Styling

Error Handling

1
404 Not Found Pages
2
Implementing the NotFound Page
3
StaticRouter Context
4
The Admin Feature
5
Admins Action Creator and Reducer
6
Admins Route Component
7
Testing Admins Route
8
Promise.all Failures
9
Error Handling Solution #1
10
Error Handling Solution #2
11
Error Handling Solution #3
12
The Require Auth Component
13
Implementing Require Auth
14
Require Auth in Use
15
Handling Redirects

Adding Better SEO Support

1
Meta Tags
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
3157 Ratings

Detailed Rating

Stars 5
2282
Stars 4
724
Stars 3
121
Stars 2
19
Stars 1
11
30-Day Money-Back Guarantee

Includes

8 hours on-demand video
4 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Server Side Rendering with React and Redux
Price:
$49.98 $41

Community

For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.

Community

Partnership Opportunities

Layer 1
samcx.com
Logo
Register New Account
Compare items
  • Total (0)
Compare
0