Data Fetching

Data Fetching (Next.js)

Canonical patterns for fetching data in Next.js App Router.

Fetch Strategy Decision

Need data for a page / route?
├─ Data is public / user-agnostic?
│   ├─ Static (rarely changes) → Server Component + fetch() with { cache: 'force-cache' }
│   ├─ Dynamic (per-request)   → Server Component + fetch() (default dynamic)
│   └─ Revalidating            → Server Component + fetch() with { next: { revalidate: N } }
├─ Data is user-specific?
│   └─ Server Component + cookies()/headers() (auto-deduped, secure)
├─ Need real-time / polling?
│   └─ Client Component + React Query / SWR
└─ Need user-initiated mutation?
    └─ Server Action (form action / event handler)

Patterns

1. Server Component Data Fetching (Preferred)

// app/posts/page.tsx — Server Component, fetch runs on server, zero client JS
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }  // ISR: revalidate every 60s
  }).then(r => r.json())

  return <PostList posts={posts} />
}

2. Parallel Data Fetching

export default async function Dashboard() {
  // Parallel — both fetches start at the same time
  const [user, analytics] = await Promise.all([
    getUser(),
    getAnalytics()
  ])

  return <DashboardView user={user} analytics={analytics} />
}

3. Streaming with Suspense

import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />              {/* Shown instantly */}
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent />  {/* Streamed in when ready */}
      </Suspense>
    </div>
  )
}

4. Server Actions (Mutations)

'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  await db.post.create({ title })
  revalidatePath('/posts')  // Revalidate the cache
}

5. Client-Side React Query (Real-time / Polling)

When Server Components aren't enough (polling, real-time, window-focus refetch):

• Use React Query / TanStack Query
• Keep the fetch logic in a custom hook
• Use initialData from Server Components to hydrate

Anti-Patterns

Checklist

• Could this fetch happen in a Server Component? (prefer it)
• Are parallel fetches batched with Promise.all?
• Is the revalidation strategy correct? (time-based / on-demand / no cache)
• Are loading states handled via loading.tsx or Suspense?
• Are error states handled via error.tsx?
• Are Server Actions used for mutations (not API routes)?
• Is sensitive data only fetched server-side, never exposed to client JS?