Next.js 16 Tutorial | DAY 3 — Server Components vs Client Components

Description

📖 Learning : Default = Server Component (runs on server, zero JS shipped). 'use client' directive for interactivity. When to use which? Composition patterns: Server → Client wrapping. Understand the React Server Component (RSC) payload. 🛠 Hands-On : Build a page with a Server Component fetching static data and a Client Component with useState for a like button. Inspect the network tab — observe zero JS for server parts. 🧪 Mini-Project : "Quote of the Day" — Server Component fetches a quote from a free API (https://api.quotable.io). Client Component adds a "Copy to Clipboard" button + like counter with useState.