Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
React: Server-Side Rendering

React: Server-Side Rendering

1h 13mAdvanced2021-03-31

Authors

Emmanuel Henri

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

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal