Explain React Server Components vs Client Components

Interview framing: A strong answer focuses on boundaries. Server Components reduce client JavaScript, while Client Components provide browser interactivity.

Server Components:

• Run only on the server.
• Can fetch data close to the source.
• Can use server-only dependencies without shipping them to the browser.
• Cannot use browser APIs, event handlers, useState, or useEffect.
• Must pass serializable props to Client Components.

Client Components:

• Run in the browser after hydration.
• Handle interactions, local state, effects, browser APIs, and event handlers.
• Add JavaScript to the client bundle, so use them intentionally.

Good architecture:

• Keep data-heavy shells and read-only content on the server where possible.
• Move only interactive widgets into Client Components.
• Avoid passing huge data blobs across the server/client boundary.
• Keep security-sensitive checks on the server; do not rely on hidden client UI.

PlainID-style example:

• A policy details page can fetch policy metadata on the server.
• The rule editor, simulator controls, and unsaved draft state likely need Client Components.

Good closing: "I choose the boundary by asking: does this code need browser interactivity, or can it stay server-side to reduce bundle size and simplify data access?"