renderToString

const html = renderToString(reactNode, options?)

• Reference
  • renderToString(reactNode, options?)
• שימוש
  • רינדור עץ React כ-HTML למחרוזת
• חלופות
  • מעבר מ-renderToString למתודת streaming בצד שרת
  • הסרת renderToString מקוד לקוח
• פתרון תקלות
  • כשקומפוננטה מבצעת suspend, ה-HTML תמיד כולל fallback

Reference

renderToString(reactNode, options?)

בשרת, קראו ל-renderToString כדי לרנדר את האפליקציה שלכם ל-HTML.

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

const html = renderToString(<App />);

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

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

Parameters

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

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

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

Returns

מחרוזת HTML.

Caveats

• ל-renderToString יש תמיכה מוגבלת ב-Suspense. אם קומפוננטה מבצעת suspend, renderToString שולחת מיד את ה-fallback שלה כ-HTML.

• renderToString עובדת בדפדפן, אבל שימוש בה בקוד לקוח לא מומלץ.

שימוש

רינדור עץ React כ-HTML למחרוזת

קראו ל-renderToString כדי לרנדר את האפליקציה שלכם למחרוזת HTML שאפשר לשלוח בתגובת השרת:

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

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

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

חלופות

מעבר מ-renderToString למתודת streaming בצד שרת

renderToString מחזירה מחרוזת מיד, ולכן לא תומכת ב-streaming או בהמתנה לנתונים.

כשאפשר, מומלץ להשתמש בחלופות המלאות האלה:

• אם אתם משתמשים ב-Node.js, השתמשו ב-renderToPipeableStream.
• אם אתם משתמשים ב-Deno או runtime מודרני של edge עם Web Streams, השתמשו ב-renderToReadableStream.

אפשר להמשיך להשתמש ב-renderToString אם סביבת השרת שלכם לא תומכת ב-streams.

הסרת renderToString מקוד לקוח

לפעמים renderToString משמשת בצד לקוח כדי להמיר קומפוננטה ל-HTML.

// 🚩 Unnecessary: using renderToString on the client
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // For example, "<svg>...</svg>"

ייבוא של react-dom/server בצד לקוח מגדיל את גודל ה-bundle ללא צורך ויש להימנע ממנו. אם צריך לרנדר קומפוננטה ל-HTML בדפדפן, השתמשו ב-createRoot וקראו את ה-HTML מתוך ה-DOM:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

הקריאה ל-flushSync נדרשת כדי שה-DOM יתעדכן לפני שקוראים את המאפיין innerHTML.

פתרון תקלות

כשקומפוננטה מבצעת suspend, ה-HTML תמיד כולל fallback

renderToString לא תומכת באופן מלא ב-Suspense.

אם קומפוננטה כלשהי מבצעת suspend (למשל כי היא מוגדרת עם lazy או מביאה נתונים), renderToString לא תחכה שהתוכן שלה ייפתר. במקום זאת, renderToString תמצא את גבול ה-<Suspense> הקרוב ביותר מעליה ותרנדר את prop ה-fallback שלו בתוך ה-HTML. התוכן לא יופיע עד שטעינת קוד הלקוח תושלם.

כדי לפתור זאת, השתמשו באחד מ-פתרונות ה-streaming המומלצים. הם יכולים להזרים תוכן במקטעים כשהוא נפתר בשרת, כך שהמשתמש יראה את העמוד מתמלא בהדרגה עוד לפני שקוד הלקוח נטען.