Frontend Academy · درس

النشر: ثابت مقابل SSR

ولّد موقعًا ثابتًا بالكامل باستخدام nuxt generate، وانشر تطبيق SSR على خادم Node أو بيئة تشغيل على الحافة، واضبط محرّك Nuxt nitro

الدرس 4 من 414 خطوة

النشر: ثابت مقابل SSR درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

يعرض Nuxt المحتوى في أي مكان

يدعم Nuxt 3 أربعة أوضاع للنشر: ثابت (nuxt generate)، وSSR (خادم Node)، وEdge (Cloudflare Workers وVercel Edge)، وهجين (لكل مسار).

النشر الثابت

يعيد nuxt generate تصيير كل مسار مسبقًا إلى ملفات HTML. انشر مجلد .output/public على أي مضيف ثابت (Netlify وVercel وGitHub Pages وS3).

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

إنشاء المسارات الديناميكية

بالنسبة إلى مسارات مثل /blog/[slug]، يحتاج Nuxt إلى معرفة جميع slugs. وفّرها عبر nitro.prerender.routes في ملف التهيئة.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

نشر SSR على Node

ينشئ nuxt build خادم Nitro. انشره على أي مضيف Node (Render أوRailway أوFly.io أو VPS الخاص بك) عبر تشغيل node .output/server/index.mjs.

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — الخادم الشامل

خادم Nuxt 3 هو Nitro — محرك قابل للنقل يستهدف أي بيئة تشغيل: Node وBun وDeno وCloudflare Workers وVercel وNetlify وAWS Lambda. بدّل البيئة المستهدفة باستخدام nitro.preset.

النشر على Edge (Cloudflare Workers)

عيّن preset إلى cloudflare-pages أو cloudflare. ينتج البناء Worker يعمل على Edge الخاصة بـCloudflare.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

النشر على Edge (Vercel Edge)

يكتشف Vercel Nuxt تلقائيًا ويستخدم preset المناسب. لفرض Edge Runtime، استخدم: preset: 'vercel-edge'.

التصيير الهجين

يمكن تصيير المسارات المختلفة بطرق مختلفة. هيّئ ذلك باستخدام routeRules.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

اختيار النشر الثابت أو SSR

الثابت: عندما نادرًا ما يتغير المحتوى، وتكون السرعة القصوى والاستضافة الرخيصة عبر CDN مهمة (المدونات ومواقع التسويق والوثائق). SSR: للمحتوى الخاص بكل مستخدم، والبيانات الديناميكية، ونتائج البحث (لوحات المعلومات والتجارة الإلكترونية). يتيح الوضع الهجين المزج بين الأوضاع لكل مسار.

متغيرات البيئة

استخدم runtimeConfig في nuxt.config.ts. تكون public مكشوفة للعميل، بينما تبقى بقية الإعدادات متاحة للخادم فقط.

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

تخزين البناء مؤقتًا في CI

خزّن .nuxt/ وnode_modules/ مؤقتًا بين عمليات تشغيل CI لتسريع عمليات البناء. يكون ذلك تلقائيًا على Vercel وNetlify.

اختبار الأداء

بعد النشر، شغّل Lighthouse على عنوان URL المنشور — وليس على localhost. فذلك يختبر CDN الحقيقي، ومواقع Edge الحقيقية، وخنق وحدة المعالجة المركزية الحقيقي.

اختبار سريع

ما أمر Nuxt 3 الذي يعيد تصيير جميع المسارات مسبقًا إلى HTML ثابت للنشر على CDN مثل Netlify أو Cloudflare Pages؟

أجب عليها في الدرس التفاعلي

مراجعة: نشر Nuxt

‏nuxt generate ← النشر الثابت (انشر .output/public). ‏nuxt build ← SSR (انشر باستخدام Node). تستهدف Nitro presets خدمات Cloudflare وVercel وNetlify وAWS وغيرها. استخدم routeRules للتصيير الهجين (prerender وisr وssr وspa لكل مسار). استخدم runtimeConfig لمتغيرات البيئة (تكون public مكشوفة للعميل). اختبر باستخدام Lighthouse على عنوان URL المنشور.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «النشر: ثابت مقابل SSR» مجاني؟

نعم — نص درس «النشر: ثابت مقابل SSR» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «النشر: ثابت مقابل SSR»؟

ولّد موقعًا ثابتًا بالكامل باستخدام nuxt generate، وانشر تطبيق SSR على خادم Node أو بيئة تشغيل على الحافة، واضبط محرّك Nuxt nitro تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «النشر: ثابت مقابل SSR»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التوجيه القائم على الملفات والاستيرادات التلقائية
useFetch وuseAsyncData
وحدات Nuxt: الصور والمصادقة وi18n
النشر: ثابت مقابل SSR

← العودة إلى Frontend Academy