Learn how Next.js pre-renders pages for speed and SEO

What is Pre-rendering?

• In regular React, the browser builds your page on the client side after JavaScript loads.

• In Next.js, the page is usually pre-rendered on the server (or at build time) so the browser instantly gets HTML with content already in it — better for speed and SEO.

Three Rendering Strategies

1. SSG (Static Site Generation) → Page is built once at build time, served as static HTML.

2. SSR (Server-Side Rendering) → Page is built on each request.

3. ISR (Incremental Static Regeneration) → Page is static but can update periodically without rebuilding the whole site.

Today, we’re focusing on SSG.

Static Site Generation (SSG)

Think of SSG like baking cookies. You bake them once (during build), then serve them directly to visitors — fast, no extra cooking.

• When to use: Content that doesn’t change often (like blogs, docs, product pages that update rarely).

• How it works: Next.js generates HTML at build time and reuses it for every visitor.

1). getStaticProps() – Fetch data at build time

This function runs only at build time, not on every request.

• Next.js calls getStaticProps() when you build your project.

• It generates static HTML with the data included.

• Visitors get an already prepared page, so it's lightning fast.

2) getStaticPaths() – For Dynamic Pages

If you have dynamic routes like /blog/[id].js, Next.js must pre-generate pages for each id.

What happens here?

• getStaticPaths() → Tells Next.js which dynamic pages to build at build time.

  • If you have 5 posts, it builds /blog/1, /blog/2, ... /blog/5.

• getStaticProps() → Fetches data for each individual page at build time.

Result: When someone visits /blog/1, the page is already built — no waiting, no server hit.

Why is SSG great?

• Super fast → HTML is ready-to-serve.

• SEO friendly → Search engines see content immediately.

• Cost-effective → Less server processing per request.