React & Next.js

React in 2026 is two languages sharing a syntax: server components that render once on the server and ship as serialized output, and client components that hydrate and run reactively in the browser. Next.js (App Router) is the most common production environment for both. Most "React is confusing now" complaints trace back to not having the server/client split clearly in mind. Get that right first; everything else follows.

The mental model

[ Server: RSC tree ] ──serialize──> [ Wire format ] ──hydrate──> [ Client: interactive tree ]
        │                                                              │
        ├── Async, runs once per request (or build)                    ├── Reactive, lives in browser
        ├── Can fetch directly, query DB, read env                     ├── Has hooks, state, effects
        ├── Cannot use useState, useEffect, browser APIs               ├── Cannot directly query DB
        └── Default in App Router                                      └── Marked with `"use client"`

The seam is "use client". Crossing it has rules: