portfolio/SSG-TEST-GUIDE.md

راهنمای تست SSG (Static Site Generation)

چطور بفهمیم SSG درست کار می‌کنه؟

1. بررسی فایل‌های تولید شده

اول بررسی کن که فایل‌های HTML واقعاً تولید شدن:

# بررسی ساختار فایل‌ها
ls .output/public/blog
ls .output/public/fa/blog

# باید این فایل‌ها رو ببینی:
# - index.html (صفحه لیست بلاگ)
# - getting-started-with-nuxt-content/index.html
# - nuxt-ui-components/index.html
# - typescript-best-practices/index.html

2. اجرای Preview Server

pnpm preview

این command یک static file server ساده راه‌اندازی می‌کنه که فقط فایل‌های HTML رو serve می‌کنه (بدون Node.js server).

3. تست‌های اصلی برای تأیید SSG

✅ تست 1: بررسی HTML Source

1. مرورگر رو باز کن و برو به: http://localhost:3000/blog
2. کلیک راست کن و "View Page Source" یا Ctrl+U بزن
3. چیزی که باید ببینی:
   • تمام محتوای HTML از قبل موجود هست (نه فقط <div id="app"></div>)
   • تگ‌های <meta> برای SEO
   • محتوای کامل پست‌های بلاگ در HTML
   • اگه فقط یک div خالی دیدی = SSG کار نکرده ❌
   • اگه محتوای کامل دیدی = SSG موفق ✅

✅ تست 2: بررسی Network با اینترنت قطع

1. مرورگر رو باز کن
2. DevTools رو باز کن (F12)
3. به تب Network برو
4. صفحه رو Refresh کن
5. چیزی که باید ببینی:
   • فقط یک request برای index.html (نه API call برای fetch کردن پست‌ها)
   • فایل HTML حجم زیادی داره (چون محتوا توش هست)
   • اگه API call دیدی = SSR یا CSR هست، نه SSG ❌
   • اگه فقط HTML دیدی = SSG موفق ✅

✅ تست 3: Disable JavaScript

1. DevTools رو باز کن (F12)
2. Ctrl+Shift+P بزن (Command Palette)
3. تایپ کن: "Disable JavaScript"
4. صفحه رو Refresh کن
5. چیزی که باید ببینی:
   • محتوای بلاگ همچنان نمایش داده میشه
   • فقط interactive features کار نمی‌کنن (مثل navigation)
   • اگه صفحه خالی شد = SSG نیست ❌
   • اگه محتوا نمایش داده شد = SSG موفق ✅

✅ تست 4: بررسی سرعت بارگذاری

1. DevTools > Network > Throttling رو روی "Fast 3G" بذار
2. صفحه رو Refresh کن
3. چیزی که باید ببینی:
   • محتوا خیلی سریع نمایش داده میشه (حتی با اینترنت کند)
   • Time to First Contentful Paint (FCP) کمتر از 1 ثانیه
   • SSG = محتوا فوری نمایش داده میشه ✅
   • SSR/CSR = باید منتظر بمونی تا محتوا load بشه ❌

✅ تست 5: بررسی Sitemap

# بررسی sitemap
curl http://localhost:3000/sitemap_index.xml
# یا در مرورگر:
# http://localhost:3000/sitemap_index.xml

باید لیست تمام URLهای بلاگ رو ببینی.

4. مقایسه SSG با SSR/CSR

ویژگی	SSG (Static)	SSR (Server)	CSR (Client)
HTML در source	✅ کامل	✅ کامل	❌ خالی
نیاز به Node.js	❌ نه	✅ بله	❌ نه
API Calls	❌ نه	✅ بله	✅ بله
سرعت	⚡ خیلی سریع	🚀 سریع	🐌 کند
SEO	✅ عالی	✅ عالی	⚠️ ضعیف
هزینه Hosting	💰 ارزان	💰💰 گران	💰 ارزان

5. تست با curl (بدون مرورگر)

# دریافت HTML خام
curl http://localhost:3000/blog/getting-started-with-nuxt-content

# اگه محتوای کامل HTML رو دیدی = SSG موفق ✅
# اگه فقط یک div خالی دیدی = SSG کار نکرده ❌

6. بررسی فایل HTML مستقیماً

# باز کردن فایل HTML در مرورگر
start .output/public/blog/getting-started-with-nuxt-content/index.html

# یا در VSCode:
code .output/public/blog/getting-started-with-nuxt-content/index.html

باید تمام محتوای پست رو در HTML ببینی.

🎯 نتیجه‌گیری

SSG موفق است اگر:

• ✅ فایل‌های HTML با محتوای کامل تولید شدن
• ✅ View Source محتوای کامل رو نشون میده
• ✅ بدون JavaScript هم محتوا نمایش داده میشه
• ✅ هیچ API call برای fetch کردن محتوا نیست
• ✅ سرعت بارگذاری خیلی سریعه
• ✅ Sitemap تولید شده

SSG کار نکرده اگر:

• ❌ View Source فقط یک div خالی نشون میده
• ❌ API call برای fetch کردن پست‌ها وجود داره
• ❌ بدون JavaScript صفحه خالی میشه
• ❌ محتوا با تأخیر load میشه

🚀 Deploy

وقتی مطمئن شدی SSG درست کار می‌کنه، می‌تونی deploy کنی:

# فولدر .output/public رو به هر static hosting آپلود کن:
# - Vercel
# - Netlify
# - Cloudflare Pages
# - GitHub Pages
# - AWS S3 + CloudFront

هیچ Node.js server لازم نیست! فقط فایل‌های استاتیک.