renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

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

Reference

renderToStaticNodeStream(reactNode, options?)

בשרת, קראו ל-renderToStaticNodeStream כדי לקבל Node.js Readable Stream.

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

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

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

ה-stream יפיק פלט HTML לא אינטראקטיבי של קומפוננטות React שלכם.

Parameters

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

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

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

Returns

Node.js Readable Stream שמפיק מחרוזת HTML. אי אפשר לבצע hydration ל-HTML שמתקבל.

Caveats

• אי אפשר לבצע hydration לפלט של renderToStaticNodeStream.

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

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

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

שימוש

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

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

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

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

ה-stream יפיק את פלט ה-HTML הראשוני הלא אינטראקטיבי של קומפוננטות React שלכם.