Next.js 16 App Router Caching Overhaul

Next.js 16 has been released, focusing on developer feedback regarding caching behaviors in the App Router. The release changes the default caching settings, making the framework easier to reason about.

It resolves one of the most common complaints about the App Router.

Dynamic by Default

In previous versions, Next.js would aggressively cache data fetches and pages by default. While this improved static performance, it often led to users seeing stale data.

Next.js 16 reverses this behavior. Routes that use dynamic inputs are now dynamic by default.

If you want a page to be statically generated, you must explicitly opt-in using configuration options.

Simplified Fetch Caching

The caching behavior of the fetch API has also been streamlined. By default, fetches will no longer be cached unless you specify a revalidation interval.

This aligns Next.js closer to the standard Web Fetch API specification.

It reduces the need to constantly use revalidatePath or revalidateTag to force page updates.

Here is how you define a static route with explicit caching in Next.js 16:

// app/tools/page.tsx
// Explicitly declare static route parameters
export const dynamic = "force-static";
export const revalidate = 3600; // Cache for 1 hour

export default async function ToolsIndex() {
  // fetch in force-static route must opt-in to cache to compile statically
  const res = await fetch("https://api.example.com/tools", {
    cache: "force-cache"
  });
  const tools = await res.json();

  return (
    <div>
      {/* render tools */}
    </div>
  );
}

Improved Client Navigation Caching

The client-side router cache has been adjusted. Navigations will now check the server for fresh content more frequently.

This prevents the browser from displaying outdated pages when users click the back button.

It provides a smoother, more reliable user experience for web applications.