Training Trains Internship
Student login
← Next.js learning path
Next.js · Module 3 of 10

Server and Client Components

Choose where each component runs for speed and interactivity.

📖 Key ideas

  1. Components in app/ are Server Components by default.
  2. Server Components can fetch data directly and ship no JS.
  3. Add "use client" at the top for state, effects and event handlers.
  4. Keep client components small, at the leaves of the tree.
  5. Never import server-only secrets into client components.
💡 Real-life example: Server Components are meals cooked in the kitchen; Client Components are the table-side flambé that needs action in the room.
Server ComponentRuns on the server, no client JS
"use client"Marks a client component
HydrationMaking server HTML interactive in the browser
server-onlyPackage that blocks client imports