Next.js 15: Brace Yourself for Breaking Cache Strategy Changes

Hey there, web wizards! It's your pal Abdo, ready to unravel the latest twists and turns in the Next.js universe. If you're a developer who's already getting nervous sweats thinking about the upcoming Next.js 15, fear not! We're here to break down the big changes, so you can smoothly ride the wave instead of getting caught in the undertow.

What’s the Buzz About?

The big news is that Next.js 15 is making some major changes to its caching strategy. While this might sound like a recipe for disaster, it's actually an opportunity to enhance performance — once you get the hang of it. But, like any major update, there are some gotchas you’ll want to be prepared for.

The Lowdown on the Changes

Here’s the gist of what’s changing in Next.js 15:

1. Fetch Requests Default to no-store
2. GET Route Handlers Won’t Cache by Default
3. Client-side Routing Won’t Cache Page Components by Default

In Next.js 14, fetch requests used the force-cache strategy by default. That means data was cached automatically. But in Next.js 15, the default strategy switches to no-store. This means no caching by default – every fetch will get fresh data each time.

javascriptCopy code
// Next.js 14
async function getData() {
  const res = await fetch('https://api.weijunext.com/');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

// Next.js 15
async function getData() {
  const res = await fetch('https://api.weijunext.com/');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

To keep caching in Next.js 15, you need to explicitly set the caching parameters:

javascriptCopy code
async function getData() {
  const res = await fetch('https://api.weijunext.com/', { cache: 'force-cache' });
  return res.json();
}

2. GET Route Handlers Won’t Cache by Default

In Next.js 14, GET route handlers cached responses by default. In Next.js 15, this is no longer the case. You’ll need to add configuration to keep caching.

javascriptCopy code
// Next.js 14
import { NextResponse } from 'next/server';

export async function GET() {
  const data = await fetchSomeData();
  return NextResponse.json({ data });
}

// Next.js 15
import { NextResponse } from 'next/server';

export async function GET() {
  const data = await fetchSomeData();
  return NextResponse.json({ data });
}

// To cache in Next.js 15
export const dynamic = 'force-static';

export async function GET() {
  const data = await fetchSomeData();
  return NextResponse.json({ data });
}

3. Client-side Routing Won’t Cache Page Components by Default

Client-side routing in Next.js 14 used to cache page components by default for a certain amount of time. In Next.js 15, the staleTime for Page segments defaults to 0, meaning data is fetched fresh on every navigation.

javascriptCopy code
// Next.js 14.2.0
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180
    },
  },
};

// Next.js 15
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 30, // Manually set dynamic route staleTime to 30 seconds
      static: 180
    },
  },
};

The Silver Lining

While these changes might sound daunting, they give us more control over caching. Think of it as moving from autopilot to manual — more effort, but also more precision and power.

Embrace the Change

We developers are no strangers to change. Every new update is a chance to learn and grow. So, let’s embrace the Next.js 15 changes and take our skills to the next level!

Prepare yourself with the theoretical knowledge now, so when Next.js 15 officially drops, you'll be ready to handle the migration like a pro.