What is SSR?

Learn the concept of server-side rendering.

What is SSR?

SSR (Server-Side Rendering) means HTML is rendered on the server and sent ready to the browser. The user sees content immediately; once JavaScript loads and "hydrates", the page becomes interactive.

SSR helps SEO and first-load performance. Because rendering happens per request, it suits dynamic content.

In Next.js App Router, Server Components do SSR by default.

Hydration

With SSR the server renders HTML; the browser shows the first paint. Then JavaScript loads and React attaches event handlers, making the page interactive. This step is called hydration.

Before hydration the page is visible but clicks do not work. That is why JavaScript must load fast.

Next.js handles hydration automatically; you write no extra code.

Exercise Write a Server Component

Write a Page component: make it async, fetch data with fetch('https://api.example.com/data'), parse JSON with await r.json(). Render <main> with <h1>{data.title}</h1>. export default Page.

Show example solution

// app/page.js
export default async function Page() {
  const r = await fetch("https://api.example.com/data");
  const data = await r.json();
  return (
    <main>
      <h1>{data.title}</h1>
    </main>
  );
}

Test yourself

What is SSR's main advantage?
- SEO and first load
- Browser cache
- Less JavaScript
- Only static files
Show answer

SEO and first load — SSR helps SEO and first-load performance.

Server component default

// app/page.js
export default function Page() {
  // Bu bir ____ Component'tir; "use client" gerekmez
  return <h1>Merhaba</h1>;
}

Show answer

// app/page.js
export default function Page() {
  // Bu bir Server Component'tir; "use client" gerekmez
  return <h1>Merhaba</h1>;
}

What is SSR: match the terms

SSR

Server render
hydrate

JS attaches
Server Component

Default
HTML

First output

Next lesson: What is SSG?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies