Static and Dynamic Rendering Basics

When building pages in Next.js, an important question is when the page is generated.

Some pages can be prepared in advance, while others need fresh data every time a user visits them. Next.js handles both cases automatically using static and dynamic rendering.

Understanding this difference helps you build faster and more efficient applications.

Static Rendering

Static rendering means the page is generated ahead of time and reused for every user.

This works best when the content does not change often, such as:

• Landing pages;
• Documentation;
• Blog posts.

Example:

export default async function Page() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

If the data does not change frequently, Next.js can cache and reuse this page.

Dynamic Rendering

Dynamic rendering means the page is generated on each request.

This is useful when the data changes frequently or depends on the user.

Examples:

• Dashboards;
• User-specific data;
• Real-time information.

You can force dynamic behavior:

export const dynamic = "force-dynamic";

export default async function Page() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.value}</div>;
}

How Next.js Decides

By default, Next.js tries to optimize your app automatically.

If your data can be cached, it uses static rendering. If it detects dynamic behavior, it switches to dynamic rendering.

You can also control this behavior when needed.