renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• הפניה
  • renderToStaticMarkup(reactNode, options?)
• שימוש
  • רינדור עץ React לא אינטראקטיבי כ-HTML למחרוזת

הפניה

renderToStaticMarkup(reactNode, options?)

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

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

const html = renderToStaticMarkup(<Page />);

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

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

פרמטרים

• reactNode: React צומת שברצונכם לרנדר ל-HTML. למשל, צומת JSX כמו <Page />.
• אופציונלי options: אובייקט עבור רינדור שרת.
  • אופציונלי identifierPrefix: מחרוזת קידומת ש-React משתמשת בה עבור מזהים עובדים על ידי useId. שימושי למניעת התנגשויות כשמשתמשים בכמה שורשים באותו עמוד.

מחזירה

מחרוזת HTML.

אזהרות

• אי אפשר לבצע הידרציה לפלט של renderToStaticMarkup.

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

• renderToStaticMarkup עובדת גם בדפדפן, אבל לא מומלץ להשתמש בה בקוד לקוח. אם צריך לרנדר קומפונטה ל-HTML בדפדפן, קבלו את ה-HTML על ידי רינדור ל-DOM node.

שימוש

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

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

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

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

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