renderToString

const html = renderToString(reactNode, options?)

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

הפניה

renderToString(reactNode, options?)

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

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

const html = renderToString(<App />);

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

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

פרמטרים

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

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

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

מחזירה

מחרוזת HTML.

אזהרות

• ל-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 למתודת הזרמת בצד שרת

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

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

• אם אתם משתמשים ב-Node.js, השתמשו ב-renderToPipeableStream.
• אם אתם משתמשים ב-Deno או זמן ריצה מודרני של edge עם זרמי אינטרנט, השתמשו ב-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> הקרוב ביותר מעליה ותרנדר את הפרופס ה-fallback שלו בתוך ה-HTML. התוכן לא יופי עד שטעינת קוד הלקוח תושלם.

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