Rendering and Hydration

Core idea

Rendering determines what HTML is sent or painted. Hydration connects that HTML to interactive client-side behavior.

Revision points

• Server-rendered HTML improves initial paint.
• Hydration attaches event handlers after the markup arrives.
• Mismatches between server and client output can cause runtime warnings.

export default function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

What to remember

Treat server output and client output as two sides of the same contract.