Problem Statement
When should you use Client Components vs Server Components and what are the restrictions of each?
Explanation
Use Server Components as the default for most components especially those that fetch data, display static content, or don't require interactivity, keeping them on the server to reduce bundle size and improve performance. Use Client Components when you need useState, useEffect, event handlers, browser APIs like localStorage or window, interactive features, or third-party libraries that depend on React hooks or browser environment. Server Components cannot use hooks, handle events, access browser APIs, or use client-side only libraries, but can directly access databases and server resources, while Client Components can't directly access server-side resources and must fetch data through API routes or Server Actions. You can compose them by importing Server Components into Client Components as children props rather than direct imports, maintaining the server-only code in Server Components while adding interactivity at the edges with Client Components for optimal performance.
Practice Sets
This question appears in the following practice sets: