Full route cache in NextJS

Introduction

Full route cache helps your Next.js app load pages faster by saving the whole page output. This means users see content quickly without waiting for the server to build it every time.

When you have pages that do not change often and can be reused for many users.

When you want to improve page load speed and reduce server work.

When your app serves mostly static content but still uses dynamic routes.

When you want to reduce backend costs by serving cached pages.

When you want to improve user experience by showing pages instantly.

Syntax

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <main>Hello, this page is fully cached!</main>;
}

Use export const dynamic = 'force-static' to tell Next.js to cache the entire route as static.

This works well with the new App Router in Next.js 13+.

Examples

This example caches the home page fully so it loads instantly for all users.

NextJS

export const dynamic = 'force-static';

export default function Home() {
  return <h1>Welcome to the cached home page!</h1>;
}

The About page is also fully cached, improving speed and reducing server load.

NextJS

export const dynamic = 'force-static';

export default function About() {
  return <p>About page content is cached and fast.</p>;
}

Sample Program

This component uses dynamic = 'force-static' to cache the entire page output. When users visit, Next.js serves the cached HTML immediately without rebuilding.

NextJS

export const dynamic = 'force-static';

export default function CachedPage() {
  return (
    <main>
      <h1>Full Route Cache Example</h1>
      <p>This page is fully cached by Next.js.</p>
    </main>
  );
}

Important Notes

Full route cache works best for pages that do not change often.

If your page needs fresh data, consider using other caching strategies.

Remember to test your cached pages to ensure they show the correct content.

Summary

Full route cache saves the entire page output for faster loading.

Use export const dynamic = 'force-static' in your page component.

Best for mostly static pages to improve speed and reduce server work.