implement ssg config for blog posts in project ,

2026-09-28 02:21:41 +03:30 · 2025-11-10 18:09:18 +03:30
parent d2333d3db2
commit 713bb83981
37 changed files with 5505 additions and 297 deletions
@@ -0,0 +1,149 @@
+# راهنمای تست 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 لازم نیست! فقط فایل‌های استاتیک.