Data Fetching & Caching

Extended fetch API

Next.js extends the native fetch with caching and revalidation options:

// app/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache', // Default: cache forever (SSG)
  })

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

  const data = await getData()
  return <div></div>
}

Cache Options

// 1. Force cache (Static Site Generation)
fetch('https://api.example.com/data', {
  cache: 'force-cache' // Default behavior
})

// 2. No cache (Server-Side Rendering)
fetch('https://api.example.com/data', {
  cache: 'no-store' // Always fetch fresh data
})

// 3. Revalidate (Incremental Static Regeneration)
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 } // Revalidate every hour
})

// 4. Revalidate with tags
fetch('https://api.example.com/data', {
  next: { tags: ['posts'] }
})

Revalidation Methods

Time-based Revalidation (ISR)

// Revalidate every 60 seconds
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }
  })
  return res.json()
}

// Route segment config

  const posts = await getPosts()
  return <div></div>
}

On-Demand Revalidation

// app/api/revalidate/route.ts

  const path = request.nextUrl.searchParams.get('path')

  if (path) {
    revalidatePath(path)
    return Response.json({ revalidated: true, now: Date.now() })
  }

  return Response.json({ revalidated: false })
}

// Usage in Server Action
'use server'

  await db.post.create({ data })

  // Revalidate specific path
  revalidatePath('/posts')

  // Revalidate entire layout
  revalidatePath('/posts', 'layout')
}

Tag-based Revalidation

// Fetch with tags
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'] }
  })
  return res.json()
}

async function getAuthors() {
  const res = await fetch('https://api.example.com/authors', {
    next: { tags: ['authors'] }
  })
  return res.json()
}

// Revalidate by tag

  // Revalidate all fetches tagged with 'posts'
  revalidateTag('posts')
}

Route Segment Config

// app/posts/page.tsx

// Force dynamic rendering

// Revalidation interval

// Fetch cache

// Runtime

// Preferred region

  return <div>Posts</div>
}

Parallel Data Fetching

async function getUser() {
  return fetch('https://api.example.com/user')
}

async function getPosts() {
  return fetch('https://api.example.com/posts')
}

async function getComments() {
  return fetch('https://api.example.com/comments')
}

  // Fetch in parallel with Promise.all
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments(),
  ])

  return (
    <div>
      
      
      
    </div>
  )
}

Sequential Data Fetching

// When one fetch depends on another

  // First fetch
  const user = await fetch(`https://api.example.com/users/${params.id}`)
    .then(res => res.json())

  // Second fetch depends on first
  const posts = await fetch(`https://api.example.com/users/${user.id}/posts`)
    .then(res => res.json())

  return (
    <div>
      <h1>{user.name}</h1>
      
    </div>
  )
}

Streaming with Suspense

// app/page.tsx

async function Posts() {
  const posts = await fetch('https://api.example.com/posts', {
    cache: 'no-store'
  }).then(res => res.json())

  return (
    <ul>
      {posts.map((post: Post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

  return (
    <div>
      <h1>Posts</h1>
      Loading posts...</div>}>
        
      
    </div>
  )
}

React cache for Deduplication

// lib/data.ts

  const res = await fetch(`https://api.example.com/users/${id}`)
  return res.json()
})

// components/user-profile.tsx

  const user = await getUser(userId) // Cached
  return <div>{user.name}</div>
}

// components/user-posts.tsx

  const user = await getUser(userId) // Uses cached result
  return <div>{user.posts.length} posts</div>
}

// app/page.tsx

  return (
    <>
      
       
    </>
  )
}

Database Queries

// lib/db.ts

const globalForPrisma = global as unknown as { prisma: PrismaClient }

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db

// app/posts/page.tsx

  const posts = await db.post.findMany({
    include: { author: true },
    orderBy: { createdAt: 'desc' },
  })

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>By {post.author.name}</p>
        </article>
      ))}
    </div>
  )
}

Error Handling

async function getData() {
  const res = await fetch('https://api.example.com/data')

  if (!res.ok) {
    // This will activate the closest error.tsx
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

  const data = await getData()
  return <div>{data.title}</div>
}

// app/error.tsx
'use client'

  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

Loading States

// app/posts/loading.tsx

  return <div>Loading posts...</div>
}

// app/posts/page.tsx

  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json())

  return <div></div>
}

Client-Side Data Fetching

// When you need client-side fetching
'use client'

const fetcher = (url: string) => fetch(url).then(res => res.json())

  const { data, error, isLoading } = useSWR('/api/posts', fetcher, {
    refreshInterval: 3000, // Refresh every 3 seconds
  })

  if (error) return <div>Failed to load</div>
  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data.map((post: Post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Preloading Data

// lib/data.ts

  void getUser(id) // Trigger fetch without awaiting
}

  return fetch(`https://api.example.com/users/${id}`)
    .then(res => res.json())
})

// components/user.tsx

  const user = await getUser(id)
  return <div>{user.name}</div>
}

// app/page.tsx

  preload('123') // Start loading immediately
  return 
}

Static Generation with Dynamic Routes

// app/posts/[slug]/page.tsx
type Post = {
  slug: string
  title: string
  content: string
}

  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json())

  return posts.map((post: Post) => ({
    slug: post.slug,
  }))
}

  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(res => res.json())

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  )
}

Quick Reference

Best Practices

1. Default to caching - Use force-cache for static content
2. Use ISR - Revalidate periodically for semi-dynamic content
3. Parallel fetching - Use Promise.all for independent requests
4. Deduplicate - Use React cache() for repeated calls
5. Stream with Suspense - Show content progressively
6. Tag your fetches - Enable granular revalidation
7. Handle errors - Use error.tsx for graceful degradation