ReactDOMServer
האובייקט ReactDOMServer מאפשר לעבד קומפוננטות ל-markup סטטי. בדרך כלל, נעשה בו שימוש בשרת Node:
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');סקירה כללית
ניתן להשתמש במתודות הבאות הן בסביבת השרת והן בסביבות דפדפן:
מתודות נוספות אלה תלויות בחבילה (stream) אשר זמינה בשרת בלבד, ולא יפעלו בדפדפן.
סימוכין
renderToString()
ReactDOMServer.renderToString(element)מרנדר קומפוננטת React ל-HTML הראשוני שלה. React יחזיר מחרוזת HTML. ניתן להשתמש בשיטה זו כדי ליצור HTML בשרת ולשלוח את ה-markup על הבקשה הראשונית עבור טעינות דף מהירות יותר ועל מנת לאפשר למנועי חיפוש לסרוק את הדפים שלכם למטרות SEO.
אם תקראו ל-ReactDOM.hydrate() על איבר שכבר כולל את ה-markup שרונדר על-ידי השרת, React תשמר אותו ורק תצמיד מטפלי אירועים, דבר המאפשר לכם לבצע חוויית טעינה-ראשונה עם ביצועים טובים מאוד.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)דומה ל-renderToString, מלבד העובדה שאינה יוצרת מאפייני DOM נוספים ש-React משתמשת בהם באופן פנימי, כגון data-reactroot. אפשרות זו שימושית אם ברצונך להשתמש ב-React כמחולל של דפים סטטיים פשוטים, שכן הסרת המאפיינים הנוספים יכולה לחסוך כמה בתים.
אם אתם מתכננים להשתמש ב-React על מנת להפוך את ה-markup לאינטראקטיבי, אל תשתמשו במתודה זו. במקום זאת, השתמשו ב-renderToString בצד השרת וב-ReactDOM.hydrate() בצד הלקוח.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)מרנדר קומפוננטת React ל-HTML הראשוני שלה. מחזירה זרם קריא (Readable stream) שמיצא מחרוזת HTML. פלט ה-HTML מזרם זה שווה בדיוק למה ש-ReactDOMServer.renderToString יחזיר. ניתן להשתמש במתודה זו כדי ליצור HTML בשרת ולשלוח את ה-markup על הבקשה הראשונית עבור טעינות דף מהירות יותר ועל מנת לאפשר למנועי חיפוש לסרוק את הדפים שלכם למטרות SEO.
אם תקראו ל-ReactDOM.hydrate() על איבר שכבר כולל את ה-markup שרונדר על-ידי השרת, React תשמר אותו ורק תצמיד מטפלי אירועים, דבר המאפשר לכם לבצע חוויית טעינה-ראשונה עם ביצועים טובים מאוד.
שימו לב:
שרת בלבד. ממשק API זה אינו זמין בדפדפן.
הזרם המוחזר ממתודה זו יחזיר זרם בתים מקודד ב-utf-8. אם תזדקקו לזרם בקידוד אחר, הסתכלו על פרויקט כמו iconv-lite, המספק זרמי טרנספורמציה עבור קידוד טקסט.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)דומה ל-renderToNodeStream, מלבד העובדה שאינה יוצרת מאפייני DOM נוספים ש-React משתמשת בהם באופן פנימי, כגון data-reactroot. אפשרות זו שימושית אם ברצונך להשתמש ב-React כמחולל של דפים סטטיים פשוטים, שכן הסרת המאפיינים הנוספים יכולה לחסוך כמה בתים.
פלט ה-HTML המוחזר מזרם זה זהה למה ש-ReactDOMServer.renderToStaticMarkup תחזיר.
אם אתם מתכננים להשתמש ב-React על מנת להפוך את ה-markup לאינטראקטיבי, אל תשתמשו במתודה זו. במקום זאת, השתמשו ב-renderToNodeStream בצד השרת וב-ReactDOM.hydrate() בצד הלקוח.
שימו לב:
שרת בלבד. ממשק API זה אינו זמין בדפדפן.
הזרם המוחזר ממתודה זו יחזיר זרם בתים מקודד ב-utf-8. אם תזדקקו לזרם בקידוד אחר, הסתכלו על פרויקט כמו iconv-lite, המספק זרמי טרנספורמציה עבור קידוד טקסט.