renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

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

Reference

renderToStaticMarkup(reactNode, options?)

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

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

const html = renderToStaticMarkup(<Page />);

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

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

Parameters

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

Returns

מחרוזת HTML.

Caveats

• אי אפשר לבצע hydration לפלט של 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 שלכם.