بنية الجزر
اجمع بين HTML المُنشأ مسبقًا والترطيب الانتقائي للجزر التفاعلية.
بنية الجزر درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
تعريف الجزر
تجمع بنية الجزر بين HTML الثابت في معظمه والمكوّنات التفاعلية المعزولة، أو الجزر، التي تُرطَّب بشكل مستقل.
لماذا الجزر
تقلل إجمالي JavaScript عبر ترطيب ما يحتاج إلى التفاعلية فقط، مما يسرّع TTI.
تأثير Astro
نشرت Astro هذا النمط، ويمكن لـ SvelteKit تبنيه عبر التصيير المسبق والترطيب الانتقائي.
التنفيذ في SvelteKit
صيّروا الصفحات مسبقًا واستخدموا ssr = true، وأجّلوا التفاعلية بتحميل مكوّنات محددة بشكل كسول.
تقسيم الكود
يقسّم SvelteKit الكود لكل مسار. وللمزيد، استخدموا import() الديناميكي داخل الصفحات.
ثابت مع ديناميكي
يمكن أن تكون صفحات التسويق ثابتة، بينما يكون نموذج "Subscribe" جزيرة تُرطَّب ديناميكيًا.
مقياس الأداء
حمولة JavaScript أقل، وLargest Contentful Paint أسرع، ونتائج أفضل في Core Web Vitals.
المفاضلات
تزداد تعقيدات البنية؛ إذ يتطلب الجمع بين الثبات والديناميكية تخطيطًا دقيقًا.
SSR عند الحافة
اجمعوا بين الجزر وSSR عند الحافة للحصول على عرض أول سريع عالميًا مع الحد الأدنى من JavaScript.
أُطر العمل
صُمّم Astro خصيصًا لمعمارية الجزر، بينما يأخذ Qwik قابلية الاستئناف إلى مستوى أبعد.
متى يُستخدم
المواقع الغنية بالمحتوى ذات التفاعلية المتقطعة: المدوّنات، والوثائق، والتجارة الإلكترونية.
تحقق سريع
ما الذي يميز معمارية الجزر؟
مراجعة
تجمع معمارية الجزر بين HTML الثابت والمكوّنات التفاعلية التي تُفعّل تفاعليًا عند الحاجة، لتحقيق الحد الأدنى من JavaScript وتسريع TTI.
الأسئلة الشائعة
هل درس «بنية الجزر» مجاني؟
نعم — نص درس «بنية الجزر» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «بنية الجزر»؟
اجمع بين HTML المُنشأ مسبقًا والترطيب الانتقائي للجزر التفاعلية. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «بنية الجزر»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- load العام مقابل load الخاص بالخادم
- prerender = true للصفحات الثابتة
- ssr = false للصفحات الخاصة بالعميل فقط
- بنية الجزر