nextjs-server-client-components

Server Components render on the server by default in Next.js App Router, giving you access to databases, APIs, and secrets. Use Client Components (marked with 'use client') only when you need browser features like event listeners, hooks, or state management. Choose Server Components first; add 'use client' only at the boundary where you need interactivity.

Add 'use client' when you need React hooks (useState, useEffect), event handlers, browser APIs, or context. Place it as high as possible in your component tree to minimize Client Component scope. Keep Server Components for data fetching, cookie/header access, and backend logic to maximize performance.

Access cookies and headers only in Server Components using the 'cookies()' and 'headers()' functions from 'next/headers'. These functions work exclusively on the server and cannot be called in components marked with 'use client'. Fetch this data in Server Components, then pass it as props to Client Components if needed.

searchParams are available in Server Components directly. In Client Components, use 'useSearchParams()' and 'useRouter()' hooks from 'next/navigation' to access query parameters and routing. Server Components remain the default choice for pathname-based routing and initial searchParams handling.

Use React's 'use' API with Suspense in Server Components to unwrap promises and handle loading states. Wrap async operations in Suspense boundaries to display fallback UI while data loads. This pattern keeps components readable and integrates streaming responses in the App Router.

You cannot pass non-serializable objects (functions, classes, Date objects) from Server to Client Components. Pass only JSON-serializable data as props. Server Components can import Client Components, but not vice versa. Avoid complex object nesting across boundaries; flatten data structures before passing props.