SSR, CSR, SSG: where is a page produced?

Whether HTML is produced on the server, in the browser or at build time changes speed, SEO and cost.

UnderstandStudy an examplePractise

Understand the concept

In client-side rendering (CSR) the server sends an empty HTML shell and a large JavaScript bundle; content appears after data is fetched in the browser. In server-side rendering (SSR) HTML is produced on the server for every request together with the data; users see content without waiting for JavaScript. In static generation (SSG) HTML is produced once at build time and served like a file; it is very fast but requires a rebuild when data changes.

In the Next.js App Router components are Server Components by default: they run on the server, can reach a database or API directly and ship no JavaScript to the browser. Interactive pieces are marked ‘use client’ and come alive in the browser through hydration. Giving data calls a lifetime (revalidate) lets pages be served from cache and refreshed in the background, also known as incremental regeneration.

On this site a blog post is rendered with SSR and the API response is cached for 60 seconds. In the simulator’s first scenario you can see Next.js calling the API on the browser’s behalf.

WHEN TO USE IT

The rendering strategy decides first-load speed, search visibility and server cost together.

COMMON PITFALL

Marking an entire page ‘use client’ and losing the benefits of Server Components.

LIVE ANIMATION

A letter’s journey through the city

Think of a request as a letter and the server as a city. Pick a scenario, press play and watch which gates the letter passes and where it gets stopped.

OUTBOUND →

You clicked a post. The browser writes a letter saying ‘send me this post’.

BrowserYour screen. It writes the request and finally turns the answer into a page.

1 / 22

01 / PRACTICE

One topic. Three levels of depth.

Illustrative example

// Server Component (varsayılan): sunucuda çalışır
export default async function Page() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

Data is fetched on the server; ready HTML goes to the browser.

This page connects to no real server or database. Code samples are illustrative for .NET 8, Next.js and SQL Server; timings are example values in the simulation, not measurements. Try samples only in your own development environment; never share real connection strings, tokens or passwords.

02 / YOUR TURN

Try it yourself first.

A product page: the description rarely changes, stock changes every minute, the ‘add to basket’ button is interactive. How do you produce each part?

Show the solution and explanation

Worked solution

Açıklama: Server Component, uzun revalidate (ör. 1 saat) veya etiketle geçersiz kılma
Stok: kısa revalidate (ör. 30 sn) ya da istemcide periyodik yenileme
Düğme: küçük bir 'use client' bileşeni

One page can combine parts with different freshness needs; each part gets the fitting strategy.

RasimAtaberkŞahin

Understand the concept

One topic. Three levels of depth.

Try it yourself first.