React Academy · درس

الإماهة الانتقائية وبث HTML

استخدم حدود Suspense لبث أجزاء HTML وإماهة الجزر التفاعلية أولًا.

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

مشكلة Hydration للصفحة بأكملها

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

بث HTML باستخدام renderToPipeableStream

ترسل واجهة البث في React 18 HTML على هيئة أجزاء. يصل هيكل الصفحة فورًا، ثم تملأ حدود Suspense المحتوى عند اكتمال حله، فيرى المستخدمون واجهة المستخدم قبل جاهزية جميع البيانات.

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/bundle.js'],
  onShellReady() {
    res.setHeader('content-type', 'text/html');
    pipe(res);
  },
  onError(error) {
    console.error(error);
  },
});

كيف يعمل البث عمليًا

تعرض React المكوّنات التي لا تتوقف مؤقتًا فورًا (هيكل الصفحة). وعندما تُحل بيانات أحد حدود Suspense، ترسل React جزءًا من HTML لملئه، بالإضافة إلى وسم script لإرشاد المتصفح إلى موضع وضعه.

Hydration الانتقائي

مع البث، تستطيع React 18 إجراء Hydration للمكوّنات بشكل مستقل. فإذا نقر المستخدم على عنصر لم تُجرَ له Hydration بعد، تعطي React الأولوية لإجراء Hydration لذلك المكوّن أولًا، ثم تتابع بقية المكوّنات.

حدود Suspense كوحدات للبث التدريجي

كل حد من حدود <Suspense> هو وحدة للبث التدريجي. يُرسل المحتوى الاحتياطي فورًا، ثم يُبث المحتوى الفعلي لاحقًا. اجعل حدود Suspense متداخلة للحصول على مستوى الدقة المناسب للبث.

function App() {
  return (
    <Layout>
      {/* Streams first — no data needed */}
      <Header />
      <Suspense fallback={<ArticleSkeleton />}>
        {/* Streams when article data resolves */}
        <Article />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        {/* Streams independently from Article */}
        <Comments />
      </Suspense>
    </Layout>
  );
}

البث التدريجي في Next.js باستخدام loading.tsx

في App Router في Next.js، يمثّل loading.tsx المحتوى الاحتياطي لـ Suspense. يُبث هيكل الصفحة (التخطيط) أولًا، ثم يُبث محتوى الصفحة عند اكتمال الدالة غير المتزامنة الخاصة بها.

// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
  return <ArticleSkeleton />;
}

// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
  const posts = await fetchPosts(); // data fetch happens server-side
  return <PostList posts={posts} />;
}

مكونات العميل داخل Suspense

تستخدم مكونات الخادم Suspense لبث البيانات. وتستخدم مكونات العميل Suspense للتحميل الكسول. ويستفيد كلا النوعين من Hydration الانتقائي.

// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

Hydration حسب الأولوية

إذا تفاعل المستخدم مع مكوّن لم تكتمل تهيئته بعد (مثل النقر)، فإن React 18 يُجري Hydration لهذا المكوّن بشكل متزامن أولًا، قبل إكمال Hydration للأجزاء الأخرى من الصفحة.

onShellReady مقابل onAllReady

يُستدعى onShellReady عندما يصبح الهيكل (الأجزاء غير المعلّقة) جاهزًا للبث. ويُستدعى onAllReady عند اكتمال عرض كل شيء — وهو مفيد للتوليد الثابت أو عندما يتعين إرسال HTML كامل دفعة واحدة.

// For streaming (progressive rendering):
onShellReady() { pipe(res); }

// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }

Abort Controller

مرّر إشارة AbortController لإلغاء SSR عند بطء العرض (مثل تجاوز المهلة المحددة).

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

const { pipe } = renderToPipeableStream(<App />, {
  signal: controller.signal,
  onShellReady() { pipe(res); },
});

clearTimeout(timeoutId);

قياس أثر البث التدريجي

استخدم Lighthouse أو WebPageTest لقياس زمن الوصول إلى أول بايت (TTFB) وأكبر جزء من المحتوى (LCP) قبل تفعيل البث التدريجي وبعده، وذلك لقياس مقدار التحسّن.

تحقق سريع

ماذا يحدث في Hydration الانتقائي في React 18 عندما ينقر المستخدم على عنصر لم تكتمل تهيئته بعد؟

مراجعة

يستخدم SSR بالبث التدريجي renderToPipeableStream وحدود Suspense لإرسال HTML تدريجيًا. يُبث كل حد من حدود Suspense بشكل مستقل. ويعطي Hydration الانتقائي الأولوية للعناصر التي تفاعل معها المستخدم. في Next.js، يمثّل loading.tsx المحتوى الاحتياطي التلقائي لـ Suspense عند بث الصفحة على مستوى الصفحة.

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

هل درس «الإماهة الانتقائية وبث HTML» مجاني؟

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

ماذا ستتعلم في «الإماهة الانتقائية وبث HTML»؟

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

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

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

كم من الوقت يستغرق درس «الإماهة الانتقائية وبث HTML»؟

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

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

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

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

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