Summary - SSR and SSG
- React course
- Advanced
- Lesson 8/56
- 5 min
Set up a static home page and a dynamic product page.
Summary - SSR and SSG
In this group you saw SSR, SSG and Server Components. SSR renders on the server per request; SSG renders once at build time and produces static HTML. RSC runs on the server without shipping JavaScript.
For interactive pieces you create Client Components with the "use client" directive. The server/client split keeps JavaScript small.
Now write a hybrid page: a Server Component plus a Client Counter together.
Practice Hybrid page
Write a Page Server Component: make it async, fetch data with await fetch('https://api.example.com/post'), parse JSON, render <article><h1>{data.title}</h1></article>. Also import and render the Counter Client Component as <Counter />. export default Page. Include the import: import Counter from "./counter".
Starter code
// app/page.js
// counter.js'den Counter'ı içe aktar
// Page bileşenini buraya yaz (async, Server Component)Sample solution
// app/page.js
import Counter from "./counter";
export default async function Page() {
const r = await fetch("https://api.example.com/post");
const data = await r.json();
return (
<article>
<h1>{data.title}</h1>
<Counter />
</article>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which scenario best fits SSG?
- User-specific cart
- Real-time chat messages
- Live stock data
- Blog posts known at build time Correct answer
Explanation: Blog posts known at build time fit SSG.
2 Client directive
// app/like.js
"____"
import { useState } from "react";
export default function Like() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}// app/like.js
"use client"
import { useState } from "react";
export default function Like() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Explanation: "use client" marks interactive components.