React Academy · درس

نمط بنية الجزر

أرسِل HTML ساكنًا في معظمه وأجرِ الإماهة لعناصر الواجهة التفاعلية فقط لتحسين زمن التفاعل.

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

ما بنية الجزر؟

ترسل بنية الجزر HTML ثابتًا في معظمه، مع أقسام تفاعلية صغيرة تُجري Hydration بشكل مستقل (الجزر). تكون معظم الصفحة بلا JavaScript، ولا تتحول إلى جزر React إلا الأدوات التي تحتاج إلى التفاعل.

المشكلة التي تحلها

يجري SSR التقليدي Hydration للصفحة بأكملها حتى لو كان 90% منها محتوى ثابتًا (رؤوسًا ونصوصًا وصورًا). أما الجزر فلا تجري Hydration إلا للأجزاء التفاعلية، مما يقلل JavaScript المرسل إلى المتصفح بدرجة كبيرة.

المفهوم الأساسي

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

Astro كإطار عمل لبنية الجزر

ساهم Astro في نشر بنية الجزر. تكون المكونات افتراضيًا بلا JavaScript. أضف توجيه client:* لاختيار إجراء Hydration.

---
import Header from './Header.astro';      // static — 0 JS
import SearchBar from './SearchBar.jsx';  // island — hydrated
import Footer from './Footer.astro';      // static — 0 JS
---
<Header />
<SearchBar client:load />   <!-- hydrate immediately -->
<SearchBar client:idle />   <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />

توجيهات Hydration

توفر أطر عمل الجزر توقيتًا دقيقًا لإجراء Hydration: client:load (فورًا)، وclient:idle (باستخدام requestIdleCallback)، وclient:visible (باستخدام IntersectionObserver)، وclient:media (باستخدام استعلام وسائط CSS).

تنفيذ الجزر في Next.js

يقرّب App Router في Next.js مفهوم الجزر من خلال الفصل بين مكونات الخادم ومكونات العميل. مكونات الخادم = محتوى ثابت؛ مكونات العميل = جزر.

// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
  const product = await getProduct();
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Only the interactive button is a Client Component island */}
      <AddToCartButton product={product} />
    </article>
  );
}

الجزر اليدوية باستخدام React lazy

من دون إطار عمل مخصص، يمكنك تحقيق بنية الجزر بتحميل المكونات التفاعلية تحميلًا كسولًا بعد تحميل الصفحة فقط.

const HeavyWidget = lazy(() => import('./HeavyWidget'));

function Page() {
  const [show, setShow] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setShow(true);
    });
    obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
    </div>
  );
}

الموازنة بين المزايا والتكاليف

المزايا: أقل قدر من JavaScript، وزمن تفاعل أولي (TTI) سريع، وتخزين المحتوى الثابت مؤقتًا بكفاءة عالية. التكاليف: لا يمكن للجزر مشاركة الحالة بسهولة (لأن لكل منها سياق JavaScript منفصلًا)، كما أن بنيتها أكثر تعقيدًا من بنية SPA التقليدية.

مشاركة الحالة بين الجزر

استخدم الآليات الأصلية في المتصفح (الأحداث المخصصة، وعنوان URL، وlocalStorage) أو متجرًا مشتركًا صغيرًا وحيدًا للتواصل بين الجزر المستقلة.

// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);

// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));

متى تستخدم بنية الجزر

تناسب هذه البنية المواقع الغنية بالمحتوى (المدونات، والتجارة الإلكترونية، والتسويق) التي يكون معظم محتواها ثابتًا، ولا تحتاج سوى مكونات قليلة إلى التفاعل (البحث، وسلة التسوق، والنماذج).

الجزر مقابل SSR وSPA

SPA: يستخدم JavaScript بالكامل ويجري Hydration لكل شيء. SSR: يعرض الخادم كل شيء ويجري Hydration لكل شيء. الجزر: يعرض الخادم كل شيء، ولا يجري Hydration إلا للأدوات التفاعلية. تتفوق الجزر في الأداء على مواقع المحتوى.

تحقق سريع

ما الفائدة الأساسية من حيث الأداء لنمط بنية الجزر؟

مراجعة

تحافظ بنية الجزر على معظم HTML ثابتًا (من دون JavaScript)، وتجري Hydration للأدوات التفاعلية فقط. استخدم Astro للحصول على إطار عمل مخصص لبنية الجزر، أو قرّب هذا النمط باستخدام مكونات الخادم ومكونات العميل في Next.js. أجرِ Hydration بشكل كسول باستخدام client:visible/IntersectionObserver للجزر غير المهمة.

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

هل درس «نمط بنية الجزر» مجاني؟

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

ماذا ستتعلم في «نمط بنية الجزر»؟

أرسِل HTML ساكنًا في معظمه وأجرِ الإماهة لعناصر الواجهة التفاعلية فقط لتحسين زمن التفاعل. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «نمط بنية الجزر»؟

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

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

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

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

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