1. The Mental Model
In the "Old" React (and Pages Router), everything was bundled and sent to the browser. The browser did the heavy lifting (Hydration).
In the App Router, components render on the server by default. They send HTML to the browser, not JavaScript logic (unless needed).
1.1 React Server Components (RSC)
- Can: Access database directly, read files, keep secrets (API keys).
- Cannot: Use hooks (`useState`, `useEffect`), add event listeners (`onClick`).
- Output: Static HTML + a special JSON payload for React to reconcile.
1.2 Client Components
Marked with "use client" at the top of the file.
- Can: Use state, effects, and interactivity.
- Cost: Adds to the JavaScript bundle size. Use sparingly (at the leaves of the tree).
2. The Setup Challenge
Task: Initialize Next.js
- Run
npx create-next-app@latest my-next-app. - Select: TypeScript, ESLint, Tailwind CSS, App Router (Yes).
- Clean up `page.tsx` and `globals.css`.
3. The Build Challenge: "Hybrid Page"
Requirements
Create a page that demonstrates the split between Server and Client.
- Server Part (`page.tsx`):
- Fetch data from a public API (e.g., `https://jsonplaceholder.typicode.com/posts`).
- Do this directly in the component:
const data = await fetch(...). No `useEffect`! - Render the list of post titles.
- Client Part (`LikeButton.tsx`):
- Create a component with
"use client". - It should have a simple counter state (`useState`).
- Render this button next to each post title.
- Create a component with
NEXT-001
Concept
The Network Boundary
Question: What happens if you try to pass a function (like `onClick={() => log('hi')}`) from a Server Component to a Client Component?
Answer: It fails. Functions are not serializable. You can pass data (strings, numbers, objects), but not functions, unless they are Server Actions (Module 3).