The best way to choose between a Server Component and a Client Component is to ask whether the component actually needs browser-side interactivity or browser-only capabilities. ### Use a Server Component When The component primarily: - renders content - accesses server-side resources - uses private credentials or environment variables - performs server-side computation - does not need browser events or state - does not need browser-only APIs For example: ```jsx export default function ProductInformation({ product }) { return (

{product.name}

{product.description}

); } ``` Nothing here requires client-side [React](/courses/reactjs). ### Use a Client Component When The component needs features such as: ```javascript useState() useEffect() onClick onChange window localStorage navigator ``` For example: ```jsx 'use client'; import { useState } from 'react'; export default function QuantitySelector() { const [quantity, setQuantity] = useState(1); return ( ); } ``` ### Do Not Convert an Entire Page Just Because One Button Is Interactive A common beginner mistake is: ```jsx 'use client'; export default function ProductPage() { // huge page } ``` just because the page contains one interactive button. A better architecture is: ```text ProductPage Server Component ├── ProductHeader Server Component ├── ProductDetails Server Component ├── Reviews Server Component └── AddToCartButton Client Component ``` For example: ```jsx import AddToCartButton from './AddToCartButton'; export default function ProductPage({ product }) { return (

{product.name}

{product.description}

); } ``` Only `AddToCartButton` needs `'use client'`. ### Useful Rule Start with a Server Component because that is the default. Move the client boundary downward to the smallest practical interactive part of the UI. ### Interview-Ready Answer Use [Server Components](/courses/nextjs) for non-interactive UI and server-side work. Use Client Components when the UI needs state, effects, event handlers, browser APIs, or client-only [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback). A common best practice is to keep pages server-oriented and move Client Component boundaries as close as possible to the interactive elements.