Lesson

Server vs client

A Server Component runs on the server while Next builds the HTML. It can await fetch the census before the page is sent. There is no browser yet, so there is no useState and no click on the well.

A Client Component runs in the browser. Mark the file with "use client". After the page paints, useEffect can fetch the same census again.

// server page
const settler = await fetch(url).then((res) => res.json());

// client island
useEffect(() => {
  fetch("/api/profile").then(...);
}, []);

Same /api/profile, two clocks. The server fetch lands in the first HTML. The client fetch lands after JavaScript runs.

I'm ready. Try the studio →