What is Static Rendering in Next.js: Explanation and Example

In Next.js, static rendering means generating HTML pages at build time before any user visits the site. This makes pages load very fast because the content is ready and served immediately without waiting for server processing.

How It Works

Static rendering in Next.js works by creating the full HTML of a page during the build process, not when a user requests it. Imagine baking cookies ahead of time and having them ready on a plate, so when a guest arrives, you just hand them a cookie instead of baking it from scratch.

This means the server does the work once, and every visitor gets the same pre-built page instantly. It’s great for pages that don’t change often, like blogs or marketing pages, because it saves time and server resources.

Example

This example shows a Next.js page using getStaticProps to fetch data at build time and render a static page.

javascript

import React from 'react';

export async function getStaticProps() {
  // Simulate fetching data
  const data = { message: 'Hello from static rendering!' };

  return {
    props: { data },
  };
}

export default function Home({ data }) {
  return <h1>{data.message}</h1>;
}

Output

<h1>Hello from static rendering!</h1>

When to Use

Use static rendering when your page content does not change often and you want very fast load times. Examples include:

• Marketing or landing pages
• Blog posts or articles
• Documentation sites

It’s less suitable for pages that need to show real-time or user-specific data because the content is fixed at build time.

Key Points

• Static rendering generates HTML once at build time.
• Pages load very fast because content is pre-built.
• Best for content that changes rarely.
• Implemented using getStaticProps in Next.js.
• Not ideal for dynamic or user-specific content.

Key Takeaways

Static rendering creates pages at build time for fast loading.

Use getStaticProps to fetch data during build in Next.js.

Ideal for pages with mostly fixed content like blogs or marketing.

Not suitable for frequently changing or personalized data.

Pre-built pages reduce server load and improve user experience.