Render Modes in React

Render Modes compares the four ways a React page can reach the browser, so you can choose the right one for each project.

What each lesson covers:

  • Client-Side Rendering: What rendering is, how CSR works, startup and initial render, re-rendering and the render cycle, the Virtual DOM and diffing, rendering triggers, and a Product Catalog capstone.
  • Server-Side Rendering: The server rendering process, the request-response lifecycle, HTML generation, hydration, server-side data fetching, SSR pros and cons, and a Blog Portal capstone to download.
  • Static Site Generation: Build-time rendering, static HTML generation, build-time data fetching, dynamic routes, deploying to a CDN, SSG pros and cons, and a Documentation Website capstone to download.
  • Incremental Static Generation: Static generation with revalidation, stale-while-revalidate, background and on-demand regeneration, caching and consistency, ISG pros and cons, and a News Portal capstone to download.

Each lesson explains the trade-offs in speed, SEO and server cost, and ends with a project you can run.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

  1. Client-Side Rendering

    What rendering is, how client-side rendering works, CSR architecture and startup, initial render, re-rendering and the render cycle, the Virtual DOM and diffing, rendering triggers, and a Product Catalog capstone.

  2. Server-Side Rendering

    How SSR works: the server rendering process, request-response lifecycle, HTML generation, hydration, server-side data fetching, SSR pros and cons, and a Blog Portal capstone to download.

  3. Static Site Generation

    How SSG works: build-time rendering, static HTML generation, the build process, build-time data fetching, dynamic routes, deployment to a CDN, SSG pros and cons, and a Documentation Website capstone to download.

  4. Incremental Static Generation

    How ISG works: static generation with revalidation, stale-while-revalidate, background regeneration, on-demand revalidation, caching and consistency, ISG pros and cons, and a News Portal capstone to download.