Back to Glossary

Static Site Generation

SSG

توليد الموقع الثابت (SSG)

Intermediatenextjs1 min read
ssgstatic generationbuild time renderinggenerateStaticParamsgetStaticProps
Official DocsSign in to save & take notes

Definition

A Next.js rendering mode where pages are built to HTML at build time, served instantly from CDN.

وضع تصيير Next.js تُبنى فيه الصفحات إلى HTML في وقت البناء، وتُخدَّم فورًا من CDN.

Why It Matters

Glossary term pages are ideal SSG candidates — the content changes rarely and every visitor sees the same HTML. SSG gives them near-instant load times and perfect SEO.

صفحات مصطلحات القاموس مرشحون مثاليون لـSSG — المحتوى يتغير نادرًا وكل زائر يرى نفس HTML. SSG يمنحها أوقات تحميل شبه فورية وتحسين محركات بحث مثالي.

Full Definition

In SSG, Next.js pre-renders pages to static HTML files at build time. These files are served from CDN with no server processing per request — extremely fast. In App Router, server components are static by default. `generateStaticParams()` tells Next.js which dynamic routes to pre-render. Glossary term pages (`/glossary/[slug]`) can be statically generated for all 155+ terms at build time.
في SSG، يُصيّر Next.js الصفحات مسبقًا إلى ملفات HTML ثابتة في وقت البناء. تُخدَّم هذه الملفات من CDN دون معالجة خادم لكل طلب — سرعة استثنائية. في App Router، مكونات الخادم ثابتة افتراضيًا.

Example Usage

“// app/glossary/[slug]/page.tsx export async function generateStaticParams() { const terms = await fetchAllSlugs(); return terms.map(t => ({ slug: t.slug })); }”

“// app/glossary/[slug]/page.tsx export async function generateStaticParams() { const terms = await fetchAllSlugs(); return terms.map(t => ({ slug: t.slug })); }”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Static Site Generation:

1

SSG for pages with frequently changing data — use ISR or dynamic rendering instead

2

Not providing generateStaticParams for dynamic routes — Next.js falls back to dynamic rendering

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Static Site Generation.

Explain:
1. What is Static Site Generation and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: SSG for pages with frequently changing data — use ISR or dynamic rendering instead, Not providing generateStaticParams for dynamic routes — Next.js falls back to dynamic rendering
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account