الكائن ReactDOMServer في React

يُمكّننا الكائن ReactDOMServer من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.

// ES وحدات
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

لمحة عامة

يُمكِن استخدام التوابع التالية في بيئة الخادم وبيئة المتصفح:

• renderToString()‎.
• renderToStaticMarkup()‎.

تعتمد هذه التوابع الإضافية على الحزمة (stream) والتي لا تتوفر إلا على الخادم ولا تعمل على المتصفح.

• renderToNodeStream()‎.
• renderToStaticNodeStream()‎.

مرجع

renderToString()‎

ReactDOMServer.renderToString(element)

يُصيِّر عنصر React إلى تمثيل HTML البدئي له. ستعيد React سلسلة HTML نصية. بإمكانك استخدام هذا التابع لتوليد  HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization).

إن استدعيت التابع ReactDOM.hydrate()‎ على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات.

renderToStaticMarkup()‎

ReactDOMServer.renderToStaticMarkup(element)

مشابه للتابع renderToString عدا أنّه لا يُنشِئ خاصيات DOM إضافية لتستخدمها React داخليًّا، مثل data-reactroot. يفيدنا ذلك إن أردنا استخدام React كمولد لصفحات ثابتة بسيطة، حيث أنّ إزالة الخاصيات الإضافية توفر علينا بعض البايتات.

إن كنت تخطط لاستخدام React من جانب العميل لجعل تمثيل HTML متفاعلًا، فلا تستخدم هذا التابع، بل استخدم بدلًا منه renderToString من جانب الخادم و ReactDOM.hydrate()‎ من جانب العميل.

renderToNodeStream()‎

ReactDOMServer.renderToNodeStream(element)

يُصيِّر عنصر React إلى تمثيل HTML البدئي له. يُعيد تدفّق بيانات (stream) قابل للقراءة والذي ينتج عنه سلسلة نصيّة في HTML. يكون ناتج HTML الصادر عن تدفّق البيانات مساويًا تمامًا للقيمة التي يعيدها التابع ReactDOMServer.renderToString. بإمكانك استخدام هذا التابع لتوليد  HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization).

إن استدعيت التابع ReactDOM.hydrate()‎ على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات.

ملاحظة: تتوفر واجهة برمجة التطبيق هذه فقط على الخادم ولا تتوفر على المتصفح.

يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة utf-8. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل iconv-lite والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر.

renderToStaticNodeStream()‎

ReactDOMServer.renderToStaticNodeStream(element)

مشابه للتابع renderToNodeStream عدا أنّه لا يُنشِئ خاصيات DOM إضافية لتستخدمها React داخليًّا، مثل data-reactroot. يفيدنا ذلك إن أردنا استخدام React كمولد لصفحات ثابتة بسيطة، حيث أنّ إزالة الخاصيات الإضافية توفر علينا بعض البايتات.

يكون ناتج HTML الصادر عن تدفّق البيانات مساويًا تمامًا للقيمة التي يعيدها التابع renderToNodeStream.

إن كنت تخطط لاستخدام React من جانب العميل لجعل تمثيل HTML متفاعلًا، فلا تستخدم هذا التابع، بل استخدم بدلًا منه renderToString من جانب الخادم و ReactDOM.hydrate()‎ من جانب العميل.

ملاحظة: تتوفر واجهة برمجة التطبيق هذه فقط على الخادم ولا تتوفر على المتصفح.

يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة utf-8. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل iconv-lite والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر.

انظر أيضًا

• واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React
• الصنف React.Component
• الكائن ReactDOM
• عناصر DOM
• الأحداث المصطنعة (Synthetic Events)
• أدوات الاختبار
• التصيير السطحي (Shallow Rendering)
• مصير الاختبار (Test Renderer)
• متطلبات بيئة JavaScript

مصادر

• صفحة الكائن ReactDOMServer في توثيق React الرسمي.