Server Component vs Client Component?

Definition:

A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.

Key points:

• Server Components can fetch server data without shipping their component code to the browser.
• Client Components support state, effects and browser events through a 'use client' boundary.
• Client Components can still be pre-rendered on the server for the initial page.

Reference: Next.js server and client components.

• Keep sensitive data access server-side and pass only serializable, necessary data across the boundary.

Interview point:

• Use a small interactive client subtree inside a server-rendered page instead of making the entire page a client component without a reason.