renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Reference
  • renderToStaticMarkup(reactNode, options?)
• Usage
  • Renderizzare un albero React non interattivo come HTML in una stringa

Reference

renderToStaticMarkup(reactNode, options?)

Sul server, chiama renderToStaticMarkup per renderizzare la tua app in HTML.

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

const html = renderToStaticMarkup(<Page />);

Produrrà un output HTML non interattivo dei tuoi componenti React.

Vedi altri esempi sotto.

Parameters

• reactNode: Un nodo React che vuoi renderizzare in HTML. Ad esempio, un elemento JSX come <Page />.
• optional options: Un oggetto per la renderizzazione sul server.
  • optional identifierPrefix: Un prefisso stringa che React usa per gli ID generati da useId. Utile per evitare conflitti quando usi più root sulla stessa pagina.

Returns

Una stringa HTML.

Caveats

• L’output di renderToStaticMarkup non supporta l’hydration.

• renderToStaticMarkup ha un supporto limitato a Suspense. Se un componente sospende, renderToStaticMarkup invia immediatamente il suo fallback come HTML.

• renderToStaticMarkup funziona nel browser, ma usarlo nel codice client non è consigliato. Se devi renderizzare un componente in HTML nel browser, ottieni l’HTML renderizzandolo in un nodo DOM.

Usage

Renderizzare un albero React non interattivo come HTML in una stringa

Chiama renderToStaticMarkup per renderizzare la tua app in una stringa HTML che puoi inviare con la risposta del server:

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

// La sintassi del route handler dipende dal tuo framework backend
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

Questo produrrà l’output HTML non interattivo iniziale dei tuoi componenti React.