الكائن ReactDOMServer

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

// ES modules
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 الصادر عن تدفّق البيانات مساويًا تمامًا للقيمة التي يعيدها التابع ReactDOMServer.renderToStaticMarkup.

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

ملاحظة:

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

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