React Server Components Have Changed React Forever — Here's the Complete Mental Model

React Server Components are not SSR. They are a fundamentally new way to build React apps where components run on the server and send zero JavaScript to the client. The Key Insight Server Components run on the server and never re-render on the client. They send their rendered output (not JavaScript) to the browser. Server Component: Runs on server → Sends HTML/RSC payload → Zero JS on client Client Component: Runs on both → Sends JavaScript → Hydrates on client Server Components (Default in Next.js App Router) // app/posts/page.tsx (Server Component by default) import { db } from ' @/lib/db ' ; export default async function PostsPage () { // Direct database access! No API needed. const posts = await db . posts . findMany ({ include : { author : true }, orderBy : { createdAt : ' desc ' }, }); return ( < div > < h1 > Posts </ h1 > { posts . map ( post => ( < article key = { post . id } > < h2 > { post . title } </ h2 > < p > By { post . author . name } </ p > < p > { post . content } </