Deep dive
`'use client'` tells Next.js that this module is a **Client Component boundary**. The file and everything it imports (down the tree) becomes part of the client bundle, and the code executes in the browser.
That enables:
- React hooks like `useState`, `useEffect`, `useReducer`,
- event handlers (`onClick`, `onSubmit`),
- browser-only APIs (`window`, `localStorage`).
Important implications
- Client Components cannot import server-only modules (DB clients, `fs`, server secrets).
- A `'use client'` boundary can grow accidentally if you import “too much” into it, increasing JS shipped to users.
Practical guidance
- Keep `'use client'` components small and focused.
- Push data fetching up to Server Components and pass serializable props down.
- Use client-only state only when the UI truly needs it.
Common pitfalls
- Adding `'use client'` at a layout/root and turning large parts of the app into client-side JS.
- Importing heavy libraries into a client boundary.
- Reading `window` during render (do it in `useEffect` if needed).