Next.js 15 App Router Caching(Part 3) - Full Route Cache

Next.js 15 App Router Caching (Part 3) – Full Route Cache

Caching in Next.js 15 is a powerful feature that can significantly improve your app’s performance, SEO, and scalability. In this part of the series, we’ll explore Full Route Cache — a mechanism that caches the entire page, either through Static Site Generation (SSG) or Incremental Static Generation (ISG).

What is Full Route Cache?

Full Route Cache refers to the caching of an entire route (or page) on the server's file system. It is primarily used for static content and is especially beneficial for:

• Improved SEO (pages are served instantly to crawlers)
• Reduced server load
• Faster response times for users

In Next.js, statically generated pages are automatically cached as part of the build or after the first request (if using ISR). This behavior is called Full Route Caching.

How does it work?

By default, Next.js tries to fully cache every route unless something prevents it. A page will not be cached if:

• It reads cookies or headers
• It uses fetch(..., { cache: 'no-store' })
• It defines Route Segment Configs (we'll explain that below)

What are Route Segment Configs?

In the App Router, you can control how each route is rendered using special exports like dynamic. These apply to files like page.tsx, layout.tsx, or route handlers.

export const dynamic = 'auto' // default - Next.js decide when to render the page
// export const dynamic = 'force-static' - Render build time
// export const dynamic = 'force-dynamic' - Render request time

async function Page() {
  return null
}

What does dynamic do?

• auto: Let Next.js decide (default)
• force-static: Always statically render the page at build time
• force-dynamic: Always render the page on every request (SSR)

Incremental Static Generation (ISR)

You can also configure static pages to revalidate at regular intervals using:

export const revalidate = 60 // seconds

This tells Next.js to serve a cached version but refresh it in the background every 60 seconds. If revalidate is set to false or omitted, the page will be revalidated only manually via revalidatePath().

Special Case: Cookies and draftMode

Reading cookies typically forces SSR. However, with draftMode (which relies on cookies), Next.js can still return a cached version of the page if draft mode is disabled:

export default async function PostPage() {
  const draftModeState = await draftMode()

  const post = await cms
    .find({
      collection: 'posts',
      where: { slug: { equals: slug } },
      limit: 1,
      draft: draftModeState.isEnabled,
    })
    ?.then(({ docs }) => docs?.[0])

    return null
}

This is a unique optimization made by Next.js to allow cached responses even when cookies are present — as long as they don’t affect the rendered output.

Final Thoughts

Understanding Next.js caching requires experimentation. But once you grasp how Full Route Caching, ISR, and Route Segment Configs work together, you’ll be able to build fast, scalable apps with full control over rendering and performance.