React Academy · درس

كيف يعمل React SSR داخليًا

تتبّع مسار renderToString/renderToPipeableStream وكيف يتولى العميل عملية الإماهة.

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

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

يتطلب React من جهة العميل JavaScript لعرض المحتوى. يرى المستخدمون صفحةً فارغة حتى يتم تحميل JavaScript وتشغيله. يعرض SSR محتوى HTML مسبقًا على الخادم، بحيث يرى المستخدمون المحتوى فورًا، مما يحسّن الأداء المتصوَّر وتحسين محركات البحث.

renderToString

واجهة SSR الأصلية: تقوم renderToString(<App />) بعرض شجرة المكوّنات بشكل متزامن في صورة سلسلة HTML على الخادم.

import { renderToString } from 'react-dom/server';
import App from './App';

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

Hydration على العميل

بعد وصول HTML، يحلّله المتصفح ويعرض واجهة المستخدم. ثم ترفق React مستمعات الأحداث باستخدام hydrateRoot() وتجعل HTML الثابت تفاعليًا — وتُسمّى هذه العملية Hydration.

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

ما الذي يحدث أثناء Hydration

تتنقّل React في DOM المعروض على الخادم وDOM الافتراضي في الوقت نفسه. إذا تطابقا، ترفق React المستمعات من دون تعديل DOM. وإذا اختلفا، تسجّل تحذيرًا بشأن Hydration وتصحّح DOM.

renderToPipeableStream

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

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/bundle.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // starts streaming
    },
  });
});

Suspense والبث

مع SSR المعتمد على البث، ترسل حدود Suspense المحتوى البديل أولًا، ثم تستبدله بالمحتوى عند حلّ البيانات، من دون حجب الإرسال الأولي لـ HTML.

// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <UserProfile /> {/* streams after data loads */}
      </Suspense>
    </Layout>
  );
}

تسلسل البيانات

يجب إجراء تسلسل للبيانات التي يجلبها الخادم وتضمينها في HTML حتى يتمكن العميل من قراءتها أثناء Hydration من دون إعادة جلبها.

// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');

// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`

// Client hydration reads:
const data = window.__INITIAL_DATA__;

الاختلافات بين البيئات

تعمل شيفرة الخادم في Node.js، وليس في المتصفح. وتتسبب الشيفرة التي تشير إلى window أو document أو localStorage في حدوث عطل على الخادم. استخدم typeof window !== 'undefined' للتحقق قبل استخدامها.

const isBrowser = typeof window !== 'undefined';

function getTheme() {
  if (!isBrowser) return 'light'; // server-safe default
  return localStorage.getItem('theme') ?? 'light';
}

React Server Components مقارنةً بـ SSR

يعرض SSR المكوّنات في صورة HTML عند كل طلب. أما React Server Components (RSC) فهي مختلفة؛ إذ لا ترسل JavaScript الخاصة بها إلى العميل مطلقًا، ويمكن أن تكون غير متزامنة، لكن RSC تتطلب أداة تجميع تدعم بروتوكول RSC (مثل Next.js وغيرها).

فوائد البث من حيث الأداء

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

تحقق سريع

ما الذي يفعله hydrateRoot() في React بشكل مختلف عن createRoot() عند وجود HTML صادر مسبقًا من الخادم؟

مراجعة

يستخدم SSR renderToPipeableStream لإرسال HTML قبل تحميل JavaScript. ويستدعي العميل hydrateRoot() لإرفاق مستمعات الأحداث بـ HTML الصادر من الخادم. يرسل SSR المعتمد على البث مع Suspense هيكل الصفحة أولًا، ثم يملأ المحتوى بشكل غير متزامن. تحقّق من واجهات برمجة التطبيقات الخاصة بالمتصفح باستخدام typeof window !== 'undefined'.

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

هل درس «كيف يعمل React SSR داخليًا» مجاني؟

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

ماذا ستتعلم في «كيف يعمل React SSR داخليًا»؟

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

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

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

كم من الوقت يستغرق درس «كيف يعمل React SSR داخليًا»؟

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

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

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

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

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