How to fix Dynamic route segments cannot be cached indefinitely in React

Export a dynamic configuration to tell Next.js how to handle the route. For pages that must be dynamically rendered, add this to your page file:

// app/blog/[slug]/page.tsx
export const dynamic = 'force-dynamic';

export default function BlogPost({ params }: { params: { slug: string } }) {
  // Your component code
}

This explicitly opts the route out of Full Route Cache and Data Cache, ensuring it renders on every request. Alternative options include:
- dynamic = 'auto' (default): Cache when possible
- dynamic = 'force-static': Force static rendering (will error if dynamic APIs are used)
- dynamic = 'error': Force static rendering and throw error if dynamic

If you want to pre-render specific dynamic routes at build time, implement generateStaticParams():

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  // Your component code
}

This pre-generates pages at build time for the returned params. For ISR support, you must return an empty array or use dynamic = 'force-static'.

Add a revalidate value to enable Incremental Static Regeneration, allowing pages to be regenerated periodically:

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour (in seconds)

export async function generateStaticParams() {
  // Return empty array to enable ISR for all params
  return [];
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  // Your component code
}

Common revalidate values:
- 3600: 1 hour
- 86400: 24 hours
- false: Cache indefinitely (only works with static routes)
- 0: Never cache, always revalidate

If you're using the experimental "use cache" directive, remove it from pages that access dynamic data:

// BEFORE (causes error)
'use cache';

export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}

// AFTER (fixed)
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}

The "use cache" directive cannot be used with request-specific arguments like params, searchParams, or cookies(). These resolve at runtime and cannot be cached during the build phase.

Control what happens when a dynamic segment is visited that wasn't generated with generateStaticParams:

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // Default: generate on-demand
// or
export const dynamicParams = false; // Return 404 for unknown params

export async function generateStaticParams() {
  return [
    { slug: 'post-1' },
    { slug: 'post-2' },
  ];
}

With dynamicParams = true, visiting /blog/post-3 will generate the page on-demand. With false, it returns a 404.

For specific fetch requests, configure caching individually instead of at the route level:

export default async function Page({ params }: { params: { id: string } }) {
  // This fetch will be cached
  const staticData = await fetch('https://api.example.com/static', {
    cache: 'force-cache'
  });
  
  // This fetch will NOT be cached
  const dynamicData = await fetch(`https://api.example.com/user/${params.id}`, {
    cache: 'no-store'
  });
  
  return <div>...</div>;
}

Cache options:
- force-cache: Cache indefinitely (default for fetch)
- no-store: Never cache
- no-cache: Cache but revalidate before use

Check your next.config.js for conflicting cache settings:

// next.config.js
module.exports = {
  experimental: {
    // Ensure this doesn't conflict with your route configs
    cacheComponents: false, // May conflict with dynamic routes
  },
};

Also verify your deployment platform (Vercel, etc.) isn't enforcing conflicting cache policies. Review the build logs to see which routes are being statically generated vs. dynamically rendered.