Careeroza

When to Use Which

Decision Table

You need to...	Server	Client
Fetch data, read the database	Yes	Possible, but slower
Use API keys or secrets	Yes	Never
Keep large libraries out of the bundle (markdown, date libs)	Yes	No
onClick, onChange, forms with live validation	No	Yes
useState, useEffect, useReducer, Context	No	Yes
Browser APIs: localStorage, window, geolocation	No	Yes

Common Mistake

Example

Using a hook in a Server Component fails at build time:

npm run build

Example output

Error:   x You're importing a component that needs `useState`. This React Hook only works
  | in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
   ,-[app/products/page.tsx:1:1]
 1 | import { useState } from 'react';

Tip: Start with Server Components everywhere. Add 'use client' only to the small pieces that need interactivity.