React Server Components vs Client Components: The Decision Framework for Next.js 14

React Server Components (RSC) are the biggest mental model shift in Next.js 14. Most devs either avoid them entirely or use them incorrectly. Here's the decision framework that makes it click. The Core Distinction Server Components run only on the server. They can: Fetch data directly (no useEffect, no loading states) Access databases, file systems, secrets Import heavy libraries without sending them to the browser NOT use hooks, event handlers, or browser APIs Client Components run on the server (for SSR) AND in the browser. They can: Use useState, useEffect, useRef, and all hooks Handle user events (onClick, onChange) Access browser APIs (localStorage, window, navigator) NOT directly access server-side resources The Decision Tree Does this component need: - onClick, onChange, or other event handlers? → Client - useState or useReducer? → Client - useEffect? → Client - Browser APIs (window, localStorage)? → Client - Real-time updates? → Client Does this component need: - Database queri