Next.js
/Advanced
Server State vs Client State
Definition
The architectural philosophy of strictly separating data that lives in a database (Server State) from data that lives purely in the user's browser memory (Client State).
Explain Like I'm New
Server State = A list of Products, the user's Account Balance, the content of a Blog Post. Client State = Is the dropdown menu currently open? What text is typed into the search bar right now? Is the Dark Mode toggle checked?
Real World Example
Migrating a legacy React app where developers shoved the entire database of 'Users' into a global Redux store (mixing Server and Client state). In Next.js, Server State stays on the Server, and Client State uses `useState` or `Zustand`.
Common Use Cases
- •Application Architecture
- •Deciding which state library to use
Interactive Example
/* MODERN NEXT.JS ARCHITECTURE SEPARATION */ // 1. SERVER STATE (Handled natively by Next.js) // Fetched directly from the database, cached by Next.js. export default async function Page() { const products = await db.getProducts(); return <ClientInteractiveWrapper products={products} />; } // 2. CLIENT STATE (Handled by useState or Zustand) // Manages purely ephemeral UI interactivity. 'use client'; export function ClientInteractiveWrapper({ products }) { // This state resets if the user refreshes the page. // It does not belong in a database or Redux. const [isGalleryOpen, setIsGalleryOpen] = useState(false); return ( <div onClick={() => setIsGalleryOpen(true)}> {/* Render products... */} </div> ); }
Interview Questions
basic
- Is the fact that a sidebar is open or closed considered Server State or Client State?
intermediate
- Why did Next.js Server Components drastically reduce the need for global state management libraries like Redux?