What is SSR?
- React course
- Advanced
- Lesson 5/56
- 4 min
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.
Practice 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.
Starter code
// app/page.js
// Page bileşenini buraya yaz (async)Sample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is SSR's main advantage?
- SEO and first load Correct answer
- Browser cache
- Less JavaScript
- Only static files
Explanation: SSR helps SEO and first-load performance.
2 Server component default
// app/page.js
export default function Page() {
// Bu bir ____ Component'tir; "use client" gerekmez
return <h1>Merhaba</h1>;
}// app/page.js
export default function Page() {
// Bu bir Server Component'tir; "use client" gerekmez
return <h1>Merhaba</h1>;
}Explanation: In App Router components are Server by default.
3 What is SSR: match the terms
| Term | Meaning |
|---|---|
SSR |
Server render |
hydrate |
JS attaches |
Server Component |
Default |
HTML |
First output |