nextjs-server-client-components

Use Server Components by default for data fetching and accessing cookies, headers, and searchParams. Use Client Components when you need user interactivity, state, or browser APIs in your Next.js App Router application.

Access searchParams directly as a prop in your Server Component page in the Next.js App Router. This keeps the page server-side rendered, avoiding the need for the 'use client' directive while handling URL query parameters.

You cannot access cookies and headers directly in Client Components. You must read these server-side within Server Components in the Next.js App Router and pass the necessary data down as props to your Client Components.

Suspense wraps Server Components to handle asynchronous data fetching. You can use the React 'use' API to unwrap promises directly within Server Components, enabling streaming and progressive rendering in Next.js App Router.

Keep pathname routing server-side by accessing routing parameters through the Next.js App Router's dynamic route segments in Server Components. Only use the 'usePathname' hook in Client Components for interactive navigation.

Adding the 'use client' directive prevents the component from running on the server, restricting direct access to cookies, headers, and searchParams. It also increases client bundle size and limits server-first rendering optimizations in Next.js.