nextjs-server-client-components

Use Server Components by default for data fetching, accessing cookies, and headers. Use Client Components when you need interactivity, event handlers, React hooks, or browser-specific APIs. 'use client' directives establish the boundary between server and client execution environments.

Access cookies and headers directly within Server Components using server-side APIs. Client Components cannot access these APIs directly; you must pass the extracted data from a Server Component as props to avoid exposing sensitive server-side logic to the browser.

useSearchParams is a client-side hook requiring the 'use client' directive for browser-based URL parameter access. It needs Suspense boundaries to prevent hydration mismatches and ensure static rendering compatibility during the initial server-side render.

Yes, React's 'use' API unwraps promises directly within Server Components, allowing you to consume asynchronous data fetched on the server. This pattern enables seamless data fetching without manually managing loading states or component-level lifecycle methods.

Server-side navigation in Next.js App Router involves routing logic that avoids client-side hooks like usePathname. For client-side routing interactions, ensure the component uses 'use client', while static pathname access can be handled through server-side routing paradigms.