بنية الجزر: التمهيد الانتقائي

تتعامل Islands Architecture، التي صاغ Jason Miller اسمها عام 2020، مع صفحة الويب على أنها HTML ثابت في معظمها، يتخلله عدد من «جزر» التفاعلية المعزولة. يُرسل محيط HTML الثابت إلى المتصفح كما هو. ولا تُنزّل JavaScript ولا تُنفّذ إلا للجزر التفاعلية، ما يجعل حجم حزمة JavaScript متناسبًا مع التفاعلية الفعلية.

كل جزيرة هي مكوّن تُنفَّذ له Hydration بشكل مستقل. يصيّر الخادم HTML الأولي للجزيرة مع بقية الصفحة. وعندما تُحمّل JavaScript الخاصة بالجزيرة، تُنفَّذ Hydration لشجرة ذلك المكوّن الفرعية فقط. ولا تلمس JavaScript HTML المحيط بالجزر مطلقًا، فهو ثابت فعلًا.

في صفحة منشور مدونة تستخدم Islands Architecture، قد يبلغ حجم حزمة JavaScript خمسة كيلوبايتات لجزيرة زر إعجاب واحدة. أما الصفحة نفسها إذا بُنيت كتطبيق React SPA، فقد ترسل أكثر من 200 كيلوبايت من JavaScript لتنفيذ Hydration للصفحة بأكملها. ويجعل أسلوب الجزر حجم الحزمة متناسبًا مع التفاعلية، لا مع حجم الصفحة.

يدعم Astro، وهو إطار العمل الرائد في Islands Architecture، جزرًا مبنية بأطر عمل مختلفة في الصفحة نفسها. ويمكن أن توجد جزيرة React بجوار جزيرة Vue وبجوار جزيرة JavaScript عادية. تُجمّع كل جزيرة بشكل مستقل، ولذلك لا ينزّل المستخدمون إلا كود إطار العمل الذي تستخدمه الجزر الظاهرة.

تجعل التوجيهية client:load Hydration للجزيرة فورية عند تحميل الصفحة. استخدموها للجزر الظاهرة والتفاعلية فورًا، مثل قائمة التنقل أو قسم الواجهة الرئيسية الذي يتضمن حقل بحث. وهذه هي استراتيجية Hydration الأعلى أولوية.

تنتظر التوجيهية client:idle حتى تصبح سلسلة التعليمات الرئيسية في المتصفح خاملة، أي بعد تحميل المحتوى المهم، قبل تنفيذ Hydration للجزيرة. وتناسب هذه التوجيهية الأدوات الموجودة أسفل الجزء الظاهر من الصفحة أو التفاعلات الثانوية غير المطلوبة فورًا، مثل شريط المشاركة الاجتماعية.

تستخدم التوجيهية client:visible Intersection Observer لتنفيذ Hydration للجزيرة فقط عندما تدخل إطار العرض أثناء التمرير. وهي مناسبة للجزر الموجودة في مواضع عميقة من الصفحة، مثل قسم التعليقات أو شريط المنتجات ذات الصلة، التي قد لا يصل إليها معظم المستخدمين. ولا تُحمّل JavaScript حتى الحاجة إليها.

تتخطى التوجيهية client:only التصيير من جهة الخادم بالكامل، ولا تصيّر الجزيرة إلا في المتصفح. ويكون ذلك ضروريًا للمكوّنات التي تستخدم واجهات برمجة تطبيقات خاصة بالمتصفح، مثل window وdocument، أو التي تعتمد على حالة جهة العميل وقت التركيب. والمقابل هو عدم وجود HTML مصيّر على الخادم لتلك الجزيرة.

تحل Islands Architecture مشكلة Hydration الكاملة من خلال ضمان تحميل JavaScript وتنفيذها للمكوّنات التفاعلية فعلًا فقط. فمقالة مدونة تتضمن زر إعجاب لا تنفّذ Hydration إلا لجزيرة زر الإعجاب؛ أما نص المقالة المؤلف من 1200 كلمة والرأس والتذييل فلا ينتج عنها أي تنفيذ لـ JavaScript على العميل.

لكل جزيرة حالة معزولة خاصة بها. ولا يمكن للجزر مشاركة حالة React مباشرةً لأنها أشجار React منفصلة. وهذا مقصود؛ فإذا احتاج مكوّنان إلى مشاركة الحالة، فينبغي دمجهما في جزيرة واحدة. أما الاتصال بين الجزر فيستخدم معاملات URL أو أحداث DOM أو مكتبات حالة خفيفة.

تفيد المواقع التي انتقلت من React SPA إلى Islands Architecture، مثل موقع توثيق Astro، بتحسينات كبيرة: تنخفض حِزم JavaScript بنسبة تتراوح بين 70% و90%، ويتحسن TTI بمقدار يتراوح بين ثانيتين وأربع ثوانٍ على الأجهزة المحمولة، وترتفع درجات أداء Lighthouse من ستينياتها إلى أكثر من 90. وتكون المكاسب الأوضح في الصفحات الغنية بالمحتوى.

ما توجيه Astro الذي يُرطّب المكوّن فقط عند تمريره إلى إطار العرض؟

تحافظ بنية الجزر على معظم الصفحة بصيغة HTML ثابتة، ولا تُرطّب إلا المكوّنات التفاعلية المعزولة. يوفّر Astro توجيهات للترطيب: client:load (فورًا)، وclient:idle (بعد دخول المتصفح في حالة الخمول)، وclient:visible (عند التمرير)، وclient:only (العرض على العميل فقط). يُرطّب كل جزيرة بشكل مستقل، مما يجعل كمية JavaScript متناسبة مع مستوى التفاعل بدلًا من حجم الصفحة.