SSR vs CSR mental model in Angular - When to Use Which

The Big Idea

Want to make your web apps feel lightning fast and smooth? Understanding SSR vs CSR is the key!

The Scenario

Imagine building a website where every time a user clicks a link, the whole page reloads and you wait for the server to send a new page. This feels slow and clunky, especially on slow internet.

The Problem

Reloading the entire page for every action wastes time and data. It also makes the site feel less smooth and responsive. Users get frustrated waiting for content to appear.

The Solution

Using SSR (Server-Side Rendering) and CSR (Client-Side Rendering) together lets the page load fast initially and then update smoothly without full reloads. SSR sends a ready page from the server, CSR updates parts on the client.

Before vs After

✗ Before

window.location.href = '/new-page'; // full page reload

✓ After

router.navigate(['/new-page']); // updates view without reload

What It Enables

This mental model helps you build apps that load quickly and feel smooth, improving user experience on all devices.

Real Life Example

Think of an online store: SSR shows the product page fast when you open it, CSR lets you add items to the cart instantly without waiting for the whole page to reload.

Key Takeaways

Manual full page reloads are slow and frustrating.

SSR delivers fast initial content from the server.

CSR updates the page smoothly on the client side.