Static rendering (default) in NextJS

Introduction

Static rendering creates web pages ahead of time. This makes pages load very fast because they are ready before anyone visits.

You have a blog with posts that don't change often.

You want a marketing website with fixed content.

You need a portfolio site showing your projects.

You want to improve page speed and SEO easily.

Syntax

NextJS

export default function Page() {
  return <main>Hello, static page!</main>
}

// No special data fetching needed for static rendering by default

Next.js automatically uses static rendering by default unless you use dynamic functions like cookies() or headers().

Static pages are generated at build time and served as plain HTML.

Examples

This simple component is statically rendered by default in Next.js.

NextJS

export default function Home() {
  return <h1>Welcome to my site</h1>
}

Another static page example with fixed content.

NextJS

export default function About() {
  return <p>About us content here.</p>
}

Sample Program

This component shows a static page. Next.js builds it once during build time. When users visit, they get the ready HTML immediately.

NextJS

export default function StaticPage() {
  return (
    <main>
      <h1>Static Rendering Example</h1>
      <p>This page is built once and served fast.</p>
    </main>
  )
}

Important Notes

Static rendering is great for pages that don't need to change on every visit.

If you need fresh data on every request, consider server rendering instead.

Static pages can be cached easily by browsers and CDNs for faster delivery.

Summary

Static rendering builds pages once at build time.

It makes pages load very fast and improves SEO.

Use it for fixed content that rarely changes.