Force-dynamic and force-static in NextJS

Introduction

Force-dynamic and force-static help Next.js decide if a page should update every time or stay the same. This makes your app faster and smarter.

When you want a page to always show fresh data, like a news feed.

When you have a page that never changes, like an About page.

When you want to control performance by choosing when to update content.

When you want to avoid unnecessary server work for static pages.

When you want to mix static and dynamic pages in your app.

Syntax

NextJS

export const dynamic = 'force-dynamic';

// or

export const dynamic = 'force-static';

Place this export at the top level of your page or layout file.

'force-dynamic' tells Next.js to always render the page on the server on each request.

'force-static' tells Next.js to render the page once at build time and reuse it for all requests.

Examples

This page will be rendered fresh on every request.

NextJS

export const dynamic = 'force-dynamic';

export default function Page() {
  return <p>Always fresh data here.</p>;
}

This page will be built once and reused for all visitors.

NextJS

export const dynamic = 'force-static';

export default function Page() {
  return <p>This page is static and fast.</p>;
}

Sample Program

This page uses force-dynamic so it updates the time on every request, showing the current server time.

NextJS

export const dynamic = 'force-dynamic';

export default function TimePage() {
  const time = new Date().toLocaleTimeString();

  return <p>Current time: {time}</p>;
}

Important Notes

Use force-dynamic for pages that need fresh data every time.

Use force-static for pages that never change to improve speed.

Setting these helps Next.js optimize your app automatically.

Summary

force-dynamic makes pages update on every request.

force-static makes pages build once and stay the same.

Use them to control when your pages update and improve performance.