Summary - SSR and SSG

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.

Exercise 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".

Show example 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>
  );
}

Test yourself

Which scenario best fits SSG?
- User-specific cart
- Real-time chat messages
- Live stock data
- Blog posts known at build time
Show answer

Blog posts known at build time — Blog posts known at build time fit SSG.

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>;
}

Show answer

// 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>;
}

Next lesson: API routes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies