Vue Academy · درس

أوضاع SSR وSSG وSPA

‏ssr:true/false، وprerender في nitro، وأمر generate، والعرض الهجين لكل مسار

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

نظرة عامة على أساليب العرض

يمكن لـ Nuxt عرض تطبيقك بثلاث طرق: SSR (يعرض الخادم كل طلب)، وSSG (تُبنى الصفحات مسبقًا في وقت البناء)، وSPA (يُعرض كل شيء في المتصفح). ويمكنك حتى المزج بينها لكل مسار.

SSR: الإعداد الافتراضي

مع ssr: true (وهو الإعداد الافتراضي)، يعرض الخادم HTML لكل طلب، ثم ينفذ العميل عملية hydration له. ويوفر ذلك ظهورًا أوليًا سريعًا وتحسينًا جيدًا لمحركات البحث، لأن برامج الزحف ترى الترميز كاملًا.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

متى يكون SSR مناسبًا

يناسب SSR المحتوى الذي يتغير كثيرًا أو يكون مخصصًا للمستخدم — مثل لوحات المعلومات والتغذية ومواقع التجارة الإلكترونية ذات الأسعار المباشرة — عندما تريد HTML حديثًا مع كل طلب.

وضع SPA

يحوّل ضبط ssr: false Nuxt إلى تطبيق صفحة واحدة: يرسل الخادم هيكلًا فارغًا، ويعرض المتصفح كل شيء. ويكون استضافته أبسط، لكنه أضعف من ناحية تحسين محركات البحث وأبطأ في الظهور الأولي.

export default defineNuxtConfig({
  ssr: false
})

متى يناسب SPA

يناسب وضع SPA الأدوات الداخلية والتطبيقات التي تتطلب تسجيل الدخول، حيث لا تهم محركات البحث وتريد نشر التطبيق كملفات ثابتة على أي CDN.

SSG: إنشاء المواقع الثابتة

تؤدي عملية تشغيل nuxt generate إلى عرض كل صفحة مسبقًا بصيغة HTML ثابتة في وقت البناء. والنتيجة مجلد من الملفات يمكنك استضافته في أي مكان من دون خادم Node.

npx nuxt generate
# outputs static HTML to .output/public

متى يناسب SSG

يُعد SSG مثاليًا للمحتوى الذي نادرًا ما يتغير — مثل المدونات والوثائق والمواقع التسويقية. فالصفحات سريعة جدًا، وتكلفة تقديمها من CDN منخفضة.

العرض لكل مسار باستخدام routeRules

يضبط إعداد routeRules أسلوب العرض لكل نمط مسار. وهذا هو العرض الهجين: إذ تستخدم أجزاء مختلفة من التطبيق نفسه استراتيجيات مختلفة.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

خيارات routeRules الشائعة

يُنشئ prerender: true الصفحة في وقت البناء؛ ويجعلها ssr: false تطبيق SPA؛ ويخزن swr: n نتيجة SSR مؤقتًا لمدة n ثانية (stale-while-revalidate)؛ بينما يرسل redirect المستخدمين إلى مكان آخر.

إعادة إنشاء المواقع الثابتة تدريجيًا

يُجري الخيار isr العرض المسبق عند أول طلب ويخزن الناتج مؤقتًا، ثم يعيد إنشاءه دوريًا. وهو يجمع بين سرعة SSG وحداثة SSR للصفحات الشائعة.

routeRules: {
  '/products/**': { isr: 600 }
}

اختيار الاستراتيجية

ابدأ باستخدام SSR للحصول على أفضل إعداد افتراضي يجمع بين تحسين محركات البحث والتفاعلية. استخدم SSG للمحتوى الثابت، وSPA للتطبيقات الخاصة، وrouteRules لضبط المسارات الفردية مع ظهور احتياجات الأداء.

اختبار سريع

اختبر معرفتك بأساليب العرض.

مراجعة

لقد تعلمت أساليب العرض:

يعرض SSR (الافتراضي) كل طلب على حدة، ويوفر تحسينًا جيدًا لمحركات البحث وظهورًا أوليًا سريعًا.
يوفر ssr:false تطبيق SPA للتطبيقات الخاصة.
ينشئ nuxt generate موقع SSG ثابتًا.
يتيح routeRules العرض الهجين: prerender وswr وisr وssr:false لكل مسار.

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

هل درس «أوضاع SSR وSSG وSPA» مجاني؟

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

ماذا ستتعلم في «أوضاع SSR وSSG وSPA»؟

‏ssr:true/false، وprerender في nitro، وأمر generate، والعرض الهجين لكل مسار تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «أوضاع SSR وSSG وSPA»؟

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

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

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

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

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