Next.js 15: Optimizing Cache for Better Performance

The release of Next.js 15 brings significant updates to its caching strategy, offering developers greater control over caching behavior. These changes may require adjustments during the upgrade process, making it crucial to review the updated documentation.

Adapting to tool updates is a common aspect of frontend development. Let’s explore how these caching updates work and what adjustments you might need to make.

The Cache Strategy Changes

The caching changes affect three major types of requests:

Fetch requests: Default caching strategy is 'no-store'.
GET route handlers: Caching is disabled by default.
Client-side routing: Page components are no longer cached by default.

Let’s dive into the details.

Fetch Requests Default to `no-store`

In Next.js 14, fetch requests used the force-cache strategy by default:

// Next.js 14 - Fetch request with default caching
async function getData() {
  const res = await fetch('https://api.nextjs.com/');
  return res.json();
}
 
export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

In Next.js 15, fetch requests no longer cache data by default:

// Next.js 15 - Fetch request with no caching by default
async function getData() {
  const res = await fetch('https://api.nextjs.com/');
  return res.json();
}
 
export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

To enable caching explicitly:

// Next.js 15 - Enabling caching for fetch requests
async function getData() {
  const res = await fetch('https://api.nextjs.com/', {
    cache: 'force-cache',
  });
  return res.json();
}

For route segments, configure caching globally:

// Configuring caching globally in Next.js 15
export const dynamic = 'force-static';
 
export default async function Page() {
  const res = await fetch('https://api.nextjs.com/');
  const data = await res.json();
  return <div>{data.title}</div>;
}

GET Route Handlers

Before (Next.js 14)

// Next.js 14 - GET route handler with no caching configuration
import { NextResponse } from 'next/server';
 
export async function GET() {
  const data = await fetchSomeData();
  return NextResponse.json({ data });
}

After (Next.js 15)

// Next.js 15 - Configuring caching for GET route handler
import { NextResponse } from 'next/server';
 
export const dynamic = 'force-static';
 
export async function GET() {
  const data = await fetchSomeData();
  return NextResponse.json({ data });
}

Add dynamic = 'force-static' to cache GET route responses.

Client-side Routing

In Next.js 14.2.0, the staleTimes experimental flag allowed custom caching configuration:

// next.config.js - Custom caching configuration in Next.js 14.2.0
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};

In Next.js 15, the default staleTime is 0, meaning data is fetched fresh during each navigation:

// Next.js 15 - Default caching behavior with fresh data fetch on each navigation
export default function Page() {
  return <div>Page Content</div>;
}

To enable caching:

// next.config.js - Enabling caching in Next.js 15
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 30, // 30 seconds
      static: 180, // 180 seconds
    },
  },
};

Unchanged Behaviors

Shared layouts and loading.js remain cached.
Back/forward navigation still caches pages.

Conclusion

Next.js 15’s caching changes provide more control over caching behavior, enabling better SSR and SSG optimization. By understanding these updates and configuring caching effectively, you can ensure a smoother upgrade process while leveraging enhanced performance capabilities. Stay informed, adapt, and create high-performance applications!