Render Modes in Angular

Render Modes is a chapter of the free Angular tutorial. Rendering means creating the HTML that users see. Angular can create it in three places: in the user's browser, on a server for each request, or once when you build the app. The choice changes how fast the first page appears, whether search engines can read your pages, and what kind of hosting you need.

What each lesson covers:

• Client-Side Rendering: How Angular starts and renders in the browser, what makes it re-render, and the strengths and limits of CSR, with a Product Catalog project.
• Server-Side Rendering: How a Node.js server renders each request, how hydration makes the page interactive, and how data is fetched on the server and transferred to the browser, with a Blog Portal project.
• Static Site Generation: How to generate HTML files at build time, including pages with route parameters, and how to publish and update them, with a Documentation Website project.

Each lesson ends with a capstone project that you can download as a complete Angular project and run on your computer.

Lessons in this section

1. Client-Side Rendering

   How Angular renders in the browser: bootstrap, initial rendering, re-rendering and its triggers, the advantages and limitations of CSR, and a Product Catalog capstone project.

2. Server-Side Rendering

   Rendering pages on a Node.js server: the SSR architecture, pre-rendered HTML, hydration and event replay, data fetching and transfer, and a Blog Portal capstone project.

3. Static Site Generation

   Generating HTML files at build time: prerendering static and parameterized routes, build-time data, deployment, and a Documentation Website capstone project.