renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• הפניה
  • renderToNodeStream(reactNode, options?)
• שימוש
  • רינדור עץ React כ-HTML ל-Node.js זרם קריא

הפניה

renderToNodeStream(reactNode, options?)

בשרת, קראו ל-renderToNodeStream כדי לקבל Node.js זרם קריא אפשר לבצע לו pipe לתגובה.

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

const stream = renderToNodeStream(<App />);
stream.pipe(response);

בצד, קראו ל-hydrateRoot כדי להפוך את ה-HTML בשרת לאינטראקטיביות.

עוד דוגמאות נוספות.

פרמטרים

• reactNode: React צומת שברצונכם לרנדר ל-HTML. לדוגמה, אלמנט JSX כמו <App />.

• אופציונלי options: אובייקט עבור רינדור שרת.

  • אופציונלי identifierPrefix: מחרוזת קידומת ש-React משתמשת בה עבור מזהים עובדים על ידי useId. שימושי למניעת התנגשויות כשמשתמשים בכמה שורשים באותו עמוד. חייב להיות זהה לקידומת שמועברת ל-hydrateRoot.

מחזירה

Node.js זרם קריא שמפיק מחרוזת HTML.

אזהרות

• המתודה הזו תחכה שכל גבולות Suspense יסתימו לפני החזרת פלט.

• החל מ-React 18, המתודה הזו מאחסנת את כל הפל בבאפר, שהייתה מספקת יתרונות סטרימינג. לכן מומלץ לעבור ל-renderToPipeableStream.

• ה-stream המוחזר הוא byte stream בקידוד utf-8. אם צריך להזרים בקידוד אחר, אפשר לבדוק פרויקט כמו iconv-lite, שמספק להפוך זרמים להמרת קידוד טקסט.

שימוש

רינדור עץ React כ-HTML ל-Node.js זרם קריא

קראו ל-renderToNodeStream כדי לקבל Node.js זרם קריא אפשר לבצע לו pipe לתגובת השרת:

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

ה-stream מפרט את פלט ה-HTML הראשוני הלא אינטראקטיבי של קומפונטות React שלכם. בצד תצטרכו לקרוא ל-hydrateRoot כדי לבצע hydration ל-HTML בשרת ולהפוך אותו לאינטראקטיבי.