React: Server-Side Rendering
1h 13mAdvanced2021-03-31
Authors

Emmanuel Henri
Executive with 20+ years of experience in programming and design
Course details
Server-side rendering lets you optimize your applications to use client or server resources depending on network and device circumstances. Old device on a slow network? Render on the server. New device, fast network? You should probably let the client do the work. Some call the resulting architecture "universal," others "isomorphic," but the results are smooth. Learn about implementing server-side rendering, or SSR, in your React projects. Emmanuel Henri shows how to set up an SSR project with React and Next.js, add a centralized store with Redux, and configure custom routes with Express and Next.js. He wraps up the course with a discussion of code splitting, which can improve application performance.
Skills covered
React.jsMetaFull-Stack Web DevelopmentFront-End Web DevelopmentWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Learn server-side rendering with React
- 02 - What you should know
1. Setting Up
- 03 - SSR - What, how, and why
- 04 - Chrome and Firefox tools
- 05 - Install the required libraries and tools
- 06 - Challenge - Why would you use SSR
- 07 - Solution - Why would you use SSR
2. Use Next.js to Build SSR
- 08 - Introducing Next.js with React
- 09 - Add initial components from template
- 10 - Add data for props
- 11 - Add Redux store and setup
- 12 - Add Redux actions
- 13 - Add Redux reducers
- 14 - Challenge - Why use Redux for SSR
- 15 - Solution - Why use Redux for SSR
3. Server-Side Rendering with Node
- 16 - Create initial Express or Next.js server
- 17 - Add the Express routes
- 18 - Add links and pages with Express or Next.js
- 19 - Challenge - Why use Node or Express for SSR
- 20 - Solution - Why use Node or Express for SSR
4. Code Splitting
- 21 - Code splitting in Next.js
- 22 - Other tools available for code splitting
- 23 - Challenge - What is the purpose of code splitting
- 24 - Solution - What is the purpose of code splitting
Conclusion
- 25 - Next steps