renderToString

const html = renderToString(reactNode, options?)

• Reference
  • renderToString(reactNode, options?)
• Usage
  • Renderizzare un albero React come HTML in una stringa
• Alternatives
  • Migrare da renderToString a una renderizzazione in streaming sul server
  • Migrare da renderToString a un prerender statico sul server
  • Rimuovere renderToString dal codice client
• Troubleshooting
  • Quando un componente sospende, l’HTML contiene sempre un fallback

Reference

renderToString(reactNode, options?)

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

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

const html = renderToString(<App />);

Sul client, chiama hydrateRoot per idratare l’HTML generato sul server e attivarne l’interattività.

Vedi altri esempi sotto.

Parameters

• reactNode: Un nodo React che vuoi renderizzare in HTML. Ad esempio, un nodo JSX come <App />.

• 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. Deve essere lo stesso prefisso passato a hydrateRoot.

Returns

Una stringa HTML.

Caveats

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

• renderToString funziona nel browser, ma usarlo nel codice client non è consigliato.

Usage

Renderizzare un albero React come HTML in una stringa

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

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

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

Questo produrrà l’output HTML iniziale non interattivo dei tuoi componenti React. Sul client, dovrai chiamare hydrateRoot per idratare quell’HTML generato sul server e attivarne l’interattività.

Alternatives

Migrare da renderToString a una renderizzazione in streaming sul server

renderToString restituisce una stringa immediatamente, quindi non supporta lo streaming del contenuto man mano che viene caricato.

Quando possibile, consigliamo di usare queste alternative complete:

• Se usi Node.js, usa renderToPipeableStream.
• Se usi Deno o un moderno edge runtime con Web Streams, usa renderToReadableStream.

Puoi continuare a usare renderToString se il tuo ambiente server non supporta gli stream.

Migrare da renderToString a un prerender statico sul server

renderToString restituisce una stringa immediatamente, quindi non supporta l’attesa del caricamento dei dati per la generazione di HTML statico.

Consigliamo di usare queste alternative complete:

• Se usi Node.js, usa prerenderToNodeStream.
• Se usi Deno o un moderno edge runtime con Web Streams, usa prerender.

Puoi continuare a usare renderToString se il tuo ambiente di generazione di siti statici non supporta gli stream.

Rimuovere renderToString dal codice client

A volte, renderToString viene usato sul client per convertire un componente in HTML.

// 🚩 Non necessario: usare renderToString sul client
import { renderToString } from 'react-dom/server';

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

Importare react-dom/server sul client aumenta inutilmente la dimensione del bundle e va evitato. Se devi renderizzare un componente in HTML nel browser, usa createRoot e leggi l’HTML dal 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); // Ad esempio, "<svg>...</svg>"

La chiamata a flushSync è necessaria affinché il DOM venga aggiornato prima di leggere la proprietà innerHTML.

Troubleshooting

Quando un componente sospende, l’HTML contiene sempre un fallback

renderToString non supporta completamente Suspense.

Se un componente sospende (ad esempio, perché è definito con lazy o recupera dati), renderToString non attenderà che il suo contenuto venga risolto. Invece, renderToString troverà il boundary <Suspense> più vicino sopra di esso e renderizzerà la sua fallback nell’HTML. Il contenuto non apparirà finché non viene caricato il codice client.

Per risolvere, usa una delle soluzioni di streaming consigliate. Per la renderizzazione sul server, possono fare streaming del contenuto a chunk man mano che viene risolto sul server, così l’utente vede la pagina riempirsi progressivamente prima che venga caricato il codice client. Per la generazione di siti statici, possono attendere che tutto il contenuto venga risolto prima di generare l’HTML statico.