CSR vs SSR vs SSG Explained with a Restaurant Story

Imagine a restaurant. There is a cook, a kitchen, a dining table, and an eater (customer).

We will use this restaurant to understand CSR, SSR, and SSG.

1. CSR - Client Side Rendering

Story

You go to the restaurant.

You sit at the table. But the table is empty.

The waiter brings you raw ingredients:

• vegetables
• rice
• spices

Now you must cook the food yourself at the table.

After cooking, you finally eat.

What happened?

• The kitchen did almost nothing.
• The customer did the cooking.

In web terms

• Browser downloads JavaScript.
• Browser builds the page.
• Then the user sees the content.

Flow

1. Browser asks for page.
2. Server sends empty page + JS.
3. Browser runs JS.
4. Page is built in browser.

Example

• React apps (traditional CSR setup)
• Angular apps (default CSR setup)

2. SSR - Server Side Rendering

Story

You go to the restaurant.

The cook prepares the food in the kitchen.

The waiter brings a fully cooked meal to your table.

You can start eating immediately.

What happened?

• Cooking happened in the kitchen.
• Customer only eats.

In web terms

• Server builds the page first.

Flow

1. Browser asks for page.
2. Server cooks (renders HTML).
3. Server sends ready page.
4. Browser shows it immediately.

Example

• Angular SSR
• Next.js
• Nuxt

3. SSG - Static Site Generation

Story

Before the restaurant opens in the morning, the cook prepares many plates of food in advance.

When customers come, the waiter instantly gives a ready plate.

No waiting.

What happened?

• Cooking was done earlier.
• Food is already ready.

In web terms

• Pages are generated at build time.

Flow

1. Website is built.
2. Pages are generated.
3. Stored on server/CDN.
4. User receives instantly.

Example

• Blog pages
• Documentation sites
• Marketing pages

Simple Comparison

Super Simple One Line

• CSR -> You cook at the table.
• SSR -> Kitchen cooks after you order.
• SSG -> Kitchen cooked before you arrived.