React Server Components — Brief Intro
Server Components run on the server only. They can fetch data and access backend resources directly. They do not ship their JavaScript to the browser — smaller bundles.
React Server Components (RSC) — what they are
Server Components run on the server only. They can fetch data and access backend resources directly. They do not ship their JavaScript to the browser — smaller bundles.
Client Components (with "use client" in Next.js) still handle interactivity — clicks, useState, useEffect.
Real-life example: Server Components are kitchen prep done before the plate leaves the kitchen — customers get the finished dish faster; they do not need to see every chopping step in the dining room.
Server vs client — simple split
Use Server Components for static content, data fetching, and SEO-heavy pages. Use Client Components for forms, buttons, and browser APIs.
Next.js App Router is the most common place beginners meet RSC. Plain Vite React apps are client-only unless you add a framework.
Real-life example: Server is the warehouse stocking shelves overnight. Client is the shop floor where customers pick items and ask questions live.
- RSC: zero client JS for that component tree
- Client: hooks, events, localStorage, animations
- Learn client React first — then add Next.js for server features