portfolio/SSG-TEST-GUIDE.md

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

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

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

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

```bash
# بررسی ساختار فایل‌ها
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

```bash
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

```bash
# بررسی 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 (بدون مرورگر)

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

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

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

```bash
# باز کردن فایل 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 کنی:

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

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