Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions src/content/reference/react-dom/server/renderToStaticMarkup.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
---
title: renderToStaticMarkup
translationStatus: ai-draft
---

<Note>

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/server/renderToStaticMarkup.md).

</Note>

<Intro>

`renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
`renderToStaticMarkup` renderizza un albero React non interattivo in una stringa HTML.

```js
const html = renderToStaticMarkup(reactNode, options?)
Expand All @@ -20,60 +27,60 @@ const html = renderToStaticMarkup(reactNode, options?)

### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/}

On the server, call `renderToStaticMarkup` to render your app to HTML.
Sul server, chiama `renderToStaticMarkup` per renderizzare la tua app in HTML.

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

const html = renderToStaticMarkup(<Page />);
```

It will produce non-interactive HTML output of your React components.
Produrrà un output HTML non interattivo dei tuoi componenti React.

[See more examples below.](#usage)
[Vedi altri esempi sotto.](#usage)

#### Parameters {/*parameters*/}

* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.
* **optional** `options`: An object for server render.
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
* `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`.](/reference/react/useId) Utile per evitare conflitti quando usi più root sulla stessa pagina.

#### Returns {/*returns*/}

An HTML string.
Una stringa HTML.

#### Caveats {/*caveats*/}

* `renderToStaticMarkup` output cannot be hydrated.
* L'output di `renderToStaticMarkup` non supporta l'hydration.

* `renderToStaticMarkup` has limited Suspense support. If a component suspends, `renderToStaticMarkup` immediately sends its fallback as HTML.
* `renderToStaticMarkup` ha un supporto limitato a Suspense. Se un componente sospende, `renderToStaticMarkup` invia immediatamente il suo fallback come HTML.

* `renderToStaticMarkup` works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, [get the HTML by rendering it into a DOM node.](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code)
* `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.](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code)

---

## Usage {/*usage*/}

### Rendering a non-interactive React tree as HTML to a string {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
### Renderizzare un albero React non interattivo come HTML in una stringa {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}

Call `renderToStaticMarkup` to render your app to an HTML string which you can send with your server response:
Chiama `renderToStaticMarkup` per renderizzare la tua app in una stringa HTML che puoi inviare con la risposta del server:

```js {5-6}
import { renderToStaticMarkup } from 'react-dom/server';

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

This will produce the initial non-interactive HTML output of your React components.
Questo produrrà l'output HTML non interattivo iniziale dei tuoi componenti React.

<Pitfall>

This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails.
Questo metodo renderizza **HTML non interattivo che non supporta l'hydration.** È utile se vuoi usare React come semplice generatore di pagine statiche, o se renderizzi contenuto completamente statico come email.

Interactive apps should use [`renderToString`](/reference/react-dom/server/renderToString) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client.
Le app interattive dovrebbero usare [`renderToString`](/reference/react-dom/server/renderToString) sul server e [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) sul client.

</Pitfall>
Loading