renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Reference
  • renderToNodeStream(reactNode, options?)
• שימוש
  • רינדור עץ React כ-HTML ל-Node.js Readable Stream

Reference

renderToNodeStream(reactNode, options?)

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

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

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

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

ראו דוגמאות נוספות בהמשך.

Parameters

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

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

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

Returns

Node.js Readable Stream שמפיק מחרוזת HTML.

Caveats

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

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

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

שימוש

רינדור עץ React כ-HTML ל-Node.js Readable Stream

קראו ל-renderToNodeStream כדי לקבל Node.js Readable Stream שאפשר לבצע לו 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 שנוצר בשרת ולהפוך אותו לאינטראקטיבי.