SSG

## 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 | Concept | Meaning | |---|---| | Build-time render | HTML is generated during build or deploy. | | Static path | A known URL generated ahead of time. | | `generateStaticParams` | App Router function that lists dynamic route params. | | CDN serving | Static output can be delivered from edge caches. | | Rebuild | New 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Using SSG for private user pages | Static output is shared. | Use SSR for private or per-user data. | | Forgetting new content needs regeneration | Static pages are prebuilt. | Rebuild, redeploy, or use ISR. | | Generating too many paths eagerly | Large 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 | Feature | Browser Impact | Notes | |---|---|---| | Static HTML | Broad support | Fast initial render. | | Client islands | Requires JavaScript | Interactivity still hydrates. | | CDN cache | Network/platform feature | Improves 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 Type | SSG Fit | |---|---| | Blog post | Strong | | Documentation | Strong | | User billing page | Poor | | Marketing page | Strong | | Frequently updated inventory | Maybe, 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.