Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
30-Day Money-Back Guarantee

This course includes:

  • 8 hours on-demand video
  • 3 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

Server Side Rendering with React and Redux

Build React, Redux, and React Router apps using Server Side Rendering (SSR), Isomorphic, and Universal JS techniques
Highest Rated
Rating: 4.9 out of 54.9 (3,018 ratings)
19,970 students
Created by Stephen Grider
Last updated 1/2021
English
English [Auto], Indonesian [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

13 sections • 94 lectures • 8h 13m total length

  • Preview01:44
  • Link to Github Repo
    00:04
  • Why Server Side Rendering?
    Preview05:28
  • SSR Overview
    Preview06:04

  • App Overview
    04:06
  • Server Architecture Approach
    08:46
  • Starter Package.Json File
    00:31
  • Boilerplate Setup
    02:48
  • Express Setup
    04:59
  • The RenderToString Function
    05:03
  • JSX on the Server
    10:41
  • Server Side Webpack
    05:04
  • Breather and Review
    02:06

  • Rebuilding and Restarting
    06:59
  • Server Side Rendering, Isomorphic Javascript, Universal Javascript
    05:52
  • Client Side JS
    04:35
  • Client Bundles
    08:42
  • The Public Directory
    05:31
  • Why Client.js?
    06:52
  • Client Bootup
    05:14

  • Merging Webpack Config
    08:26
  • Single Script Startup
    04:45
  • Ignoring Files with Webpack
    06:20
  • Renderer Helper
    04:04

  • Implementing React Router Support
    03:04
  • BrowserRouter vs StaticRouter
    05:08
  • Route Configuration
    03:34
  • HTML Mismatch
    04:54
  • More on Route Configuration
    06:18
  • Routing Tiers
    02:56

  • The Users API
    05:21
  • Four Big Challenges
    08:28
  • Browser Store Creation
    03:24
  • Server Store Creation
    07:32
  • FetchUsers Action Creator
    03:13
  • The Users Reducer
    03:12
  • Reducer Imports
    02:00
  • UsersList Component
    06:02
  • Babel Polyfill
    03:41

  • Detecting Data Load Completion
    04:35
  • Solution #1 for Data Loading
    07:05
  • Solution #2 for Data Loading
    04:38
  • The React Router Config Library
    05:57
  • Updating Route Uses
    03:37
  • The MatchRoutes Function
    03:26
  • LoadData Functions
    10:48
  • Store Dispatch
    06:52
  • Waiting for Data Load Completion
    03:13
  • Breather and Review
    04:56

  • The Page Approach
    02:54
  • Refactoring to Pages
    02:08
  • Refactoring Page Exports
    04:45
  • Client State Rehydration
    04:43
  • More on Client State Rehydration
    05:27
  • Dumping State to Templates
    07:46
  • Mitigating XSS Attacks
    08:32

  • Authentication Issues
    05:04
  • Authentication via Proxy
    04:52
  • Why Not JWT's?
    05:37
  • Proxy Setup
    06:24
  • Renderer to API Communication
    05:06
  • Axios Instances with Redux Thunk
    04:52
  • Client Axios Instance
    04:53
  • Server Axios Instance
    08:14
  • The Header Component
    03:16
  • Adding an App Component
    07:40
  • Building the Header
    02:32
  • Fetching Auth Status
    06:12
  • Calling FetchCurrentUser
    03:33
  • Connecting the Header
    06:12
  • Header Customization
    10:32
  • Header Styling
    05:45

  • 404 Not Found Pages
    02:57
  • Implementing the NotFound Page
    02:59
  • StaticRouter Context
    08:58
  • The Admin Feature
    02:09
  • Admins Action Creator and Reducer
    03:30
  • Admins Route Component
    04:32
  • Testing Admins Route
    04:24
  • Promise.all Failures
    06:19
  • Error Handling Solution #1
    06:16
  • Error Handling Solution #2
    06:31
  • Error Handling Solution #3
    07:54
  • The Require Auth Component
    04:01
  • Implementing Require Auth
    08:57
  • Require Auth in Use
    04:56
  • Handling Redirects
    04:12

Requirements

  • This is not a beginner course. You must be familiar with React, Redux, React Router, and Express

Description

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.

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

Featured review

Torleif Berger
Torleif Berger
17 courses
10 reviews
Rating: 4.5 out of 5a year ago
Very clear, easy to follow, super useful. 🎉 Two things I really felt was missing in this otherwise great course: * Some ideas on how to prevent the "double-loading" data issue * How to build this thing for production, and how to host it...

Instructor

Stephen Grider
Engineering Architect
Stephen Grider
  • 4.7 Instructor Rating
  • 278,812 Reviews
  • 733,523 Students
  • 29 Courses

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.