ReviseAlgo Logo

Rendering

SSG

Learn static site generation in Next.js, including build-time HTML, generateStaticParams, and when static pages are the fastest option.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain static site generation.
  • Use generateStaticParams for known dynamic routes.
  • Identify pages that should be generated at build time.
  • Compare SSG with SSR and ISR.

    • Difficulty: Beginner.

    2. Prerequisites

  • Dynamic file routing.
  • Server Components.
  • Basic build and deploy concepts.

    • 3. Overview

    Static site generation creates HTML ahead of time, usually during the build. The generated page can be served quickly from a CDN because the server does not need to render it from scratch for each request.

    4. Why This Topic Matters

    SSG is one of the fastest rendering strategies for content that does not change per user. It is ideal for documentation, blogs, course lessons, marketing pages, and static product catalogs.

    5. Real-World Analogy

    SSG is like printing brochures before an event. Visitors receive a ready-made copy instantly, but you must reprint if the content changes.

    6. Core Concepts

    ConceptMeaning
    Build-time renderHTML is generated during build or deploy.
    Static pathA known URL generated ahead of time.
    generateStaticParamsApp Router function that lists dynamic route params.
    CDN servingStatic output can be delivered from edge caches.
    RebuildNew deployment needed when purely static content changes.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Next.js can pre-render /docs/intro and /docs/routing because the possible params are known.

    10. Interactive Playground

    Try this:

  • Add two known docs pages with generateStaticParams.
  • Run npm run build and inspect the generated route list.
  • Add a new doc item and rebuild.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Using SSG for private user pagesStatic output is shared.Use SSR for private or per-user data.
    Forgetting new content needs regenerationStatic pages are prebuilt.Rebuild, redeploy, or use ISR.
    Generating too many paths eagerlyLarge builds can become slow.Use selective generation or ISR for huge catalogs.

    12. Best Practices

  • Use SSG for stable public content.
  • Keep build-time data deterministic.
  • Use generateStaticParams for known dynamic routes.
  • Avoid private data in static pages.
  • Use ISR when content changes after deployment.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Static HTMLBroad supportFast initial render.
    Client islandsRequires JavaScriptInteractivity still hydrates.
    CDN cacheNetwork/platform featureImproves latency globally.

    14. Interview Questions

    Easy: What does SSG stand for?

    Answer: Static site generation.

    Medium: What does generateStaticParams do?

    Answer: It tells Next.js which dynamic route params should be generated statically.

    Hard: Why can SSG be risky for personalized pages?

    Answer: Static output is shared and generated without per-request user context, so private data can be stale or leaked if misused.

    15. Debugging Exercise

    Bug report: "A newly published blog post returns 404 after deployment." The blog uses only generateStaticParams.

    Solution

    The route list was generated at build time. Rebuild and redeploy, or use ISR/dynamic generation depending on the content workflow.

    16. Practice Exercises

  • Easy: Generate static docs pages from an array.
  • Medium: Generate static product pages from a CMS list.
  • Hard: Compare build output for SSG routes and SSR routes.

    • 17. Scenario-Based Challenge

    A course platform has 500 lessons that change rarely. Should lesson pages use SSG?

    Walkthrough

    Yes, SSG is a strong fit. Lessons are public, stable, SEO-friendly content. Use rebuilds or ISR if edits need to appear without full redeploys.

    18. Quick Quiz

    1. When is SSG generated? Answer: Ahead of time, usually at build. 2. Is SSG good for public docs? Answer: Yes. 3. Is SSG good for private dashboards? Answer: No. 4. What lists static dynamic params? Answer: generateStaticParams. 5. What strategy refreshes static pages after deployment? Answer: ISR.

    19. Summary & Key Takeaways

  • SSG creates pages ahead of time.
  • Static pages are fast and CDN-friendly.
  • generateStaticParams powers static dynamic routes.
  • SSG is best for stable public content.
  • Use ISR when static content needs periodic refresh.

    • 20. Cheat Sheet

    Page TypeSSG Fit
    Blog postStrong
    DocumentationStrong
    User billing pagePoor
    Marketing pageStrong
    Frequently updated inventoryMaybe, with ISR

    21. Further Reading

  • Next.js Docs: Static Rendering.
  • Next.js Docs: generateStaticParams.
  • web.dev: Static rendering.

    • 22. Next Lesson Preview

    Next, you will learn ISR, which updates static pages after deployment without rebuilding the entire site.