diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index cbaef8bb3..2907d90e5 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -1,35 +1,42 @@ --- -title: Escape Hatches +title: Soluzioni alternative +translationStatus: ai-draft --- + + +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/learn/escape-hatches.md). + + + -Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you'll learn the escape hatches that let you "step outside" React and connect to external systems. Most of your application logic and data flow should not rely on these features. +Alcuni dei tuoi componenti potrebbero dover controllare e sincronizzarsi con sistemi esterni a React. Per esempio, potresti dover mettere a fuoco un input usando le API del browser, avviare e mettere in pausa un lettore video implementato senza React, o connetterti e ascoltare messaggi da un server remoto. In questo capitolo imparerai le soluzioni alternative (*escape hatch*) che ti permettono di "uscire" da React e connetterti a sistemi esterni. La maggior parte della logica della tua applicazione e del flusso di dati non dovrebbe basarsi su queste funzionalità. -* [How to "remember" information without re-rendering](/learn/referencing-values-with-refs) -* [How to access DOM elements managed by React](/learn/manipulating-the-dom-with-refs) -* [How to synchronize components with external systems](/learn/synchronizing-with-effects) -* [How to remove unnecessary Effects from your components](/learn/you-might-not-need-an-effect) -* [How an Effect's lifecycle is different from a component's](/learn/lifecycle-of-reactive-effects) -* [How to prevent some values from re-triggering Effects](/learn/separating-events-from-effects) -* [How to make your Effect re-run less often](/learn/removing-effect-dependencies) -* [How to share logic between components](/learn/reusing-logic-with-custom-hooks) +* [Come "ricordare" informazioni senza ri-renderizzare](/learn/referencing-values-with-refs) +* [Come accedere agli elementi DOM gestiti da React](/learn/manipulating-the-dom-with-refs) +* [Come sincronizzare i componenti con sistemi esterni](/learn/synchronizing-with-effects) +* [Come rimuovere Effetti non necessari dai tuoi componenti](/learn/you-might-not-need-an-effect) +* [In che modo il ciclo di vita di un Effetto è diverso da quello di un componente](/learn/lifecycle-of-reactive-effects) +* [Come impedire che alcuni valori riattivino gli Effetti](/learn/separating-events-from-effects) +* [Come far rieseguire un Effetto meno spesso](/learn/removing-effect-dependencies) +* [Come condividere logica tra componenti](/learn/reusing-logic-with-custom-hooks) -## Referencing values with refs {/*referencing-values-with-refs*/} +## Referenziare valori con i ref {/*referencing-values-with-refs*/} -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*: +Quando vuoi che un componente "ricordi" un'informazione, ma non vuoi che quell'informazione [avvii nuove renderizzazioni](/learn/render-and-commit), puoi usare un *ref*: ```js const ref = useRef(0); ``` -Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! You can access the current value of that ref through the `ref.current` property. +Come lo state, i ref vengono conservati da React tra le ri-renderizzazioni. Tuttavia, impostare lo state ri-renderizza un componente. Modificare un ref no! Puoi accedere al valore corrente di quel ref tramite la proprietà `ref.current`. @@ -54,17 +61,17 @@ export default function Counter() { -A ref is like a secret pocket of your component that React doesn't track. For example, you can use refs to store [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), and other objects that don't impact the component's rendering output. +Un ref è come una tasca segreta del tuo componente che React non traccia. Per esempio, puoi usare i ref per memorizzare [ID di timeout](https://developer.mozilla.org/it/docs/Web/API/setTimeout#return_value), [elementi DOM](https://developer.mozilla.org/it/docs/Web/API/Element) e altri oggetti che non influenzano l'output di renderizzazione del componente. -Read **[Referencing Values with Refs](/learn/referencing-values-with-refs)** to learn how to use refs to remember information. +Leggi **[Referenziare valori con i ref](/learn/referencing-values-with-refs)** per imparare a usare i ref per ricordare informazioni. -## Manipulating the DOM with refs {/*manipulating-the-dom-with-refs*/} +## Manipolare il DOM con i ref {/*manipulating-the-dom-with-refs*/} -React automatically updates the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a ref to the DOM node. For example, clicking the button will focus the input using a ref: +React aggiorna automaticamente il DOM per corrispondere al tuo output di renderizzazione, quindi i tuoi componenti non dovranno spesso manipolarlo. Tuttavia, a volte potresti aver bisogno di accedere agli elementi DOM gestiti da React — per esempio, per mettere a fuoco un nodo, scorrere fino ad esso o misurarne dimensioni e posizione. Non c'è un modo integrato in React per fare queste cose, quindi avrai bisogno di un ref al nodo DOM. Per esempio, cliccando il pulsante metterà a fuoco l'input usando un ref: @@ -93,15 +100,15 @@ export default function Form() { -Read **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)** to learn how to access DOM elements managed by React. +Leggi **[Manipolare il DOM con i ref](/learn/manipulating-the-dom-with-refs)** per imparare ad accedere agli elementi DOM gestiti da React. -## Synchronizing with Effects {/*synchronizing-with-effects*/} +## Sincronizzare con gli Effetti {/*synchronizing-with-effects*/} -Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React. +Alcuni componenti devono sincronizzarsi con sistemi esterni. Per esempio, potresti voler controllare un componente non-React in base allo state di React, impostare una connessione al server o inviare un log di analytics quando un componente appare sullo schermo. A differenza dei gestori di eventi, che ti permettono di gestire eventi particolari, gli *Effetti* ti permettono di eseguire del codice dopo la renderizzazione. Usali per sincronizzare il tuo componente con un sistema esterno a React. -Press Play/Pause a few times and see how the video player stays synchronized to the `isPlaying` prop value: +Premi Play/Pause qualche volta e osserva come il lettore video resta sincronizzato con il valore della prop `isPlaying`: @@ -145,7 +152,7 @@ video { width: 250px; } -Many Effects also "clean up" after themselves. For example, an Effect that sets up a connection to a chat server should return a *cleanup function* that tells React how to disconnect your component from that server: +Molti Effetti si "ripuliscono" anche da soli. Per esempio, un Effetto che imposta una connessione a un server di chat dovrebbe restituire una *funzione di cleanup* che dice a React come disconnettere il tuo componente da quel server: @@ -183,23 +190,23 @@ input { display: block; margin-bottom: 20px; } -In development, React will immediately run and clean up your Effect one extra time. This is why you see `"✅ Connecting..."` printed twice. This ensures that you don't forget to implement the cleanup function. +In sviluppo, React eseguirà e ripulirà immediatamente il tuo Effetto un'ulteriore volta. Ecco perché vedi `"✅ Connecting..."` stampato due volte. Questo garantisce che non dimentichi di implementare la funzione di cleanup. -Read **[Synchronizing with Effects](/learn/synchronizing-with-effects)** to learn how to synchronize components with external systems. +Leggi **[Sincronizzare con gli Effetti](/learn/synchronizing-with-effects)** per imparare a sincronizzare i componenti con sistemi esterni. -## You Might Not Need An Effect {/*you-might-not-need-an-effect*/} +## Potresti non avere bisogno di un Effetto {/*you-might-not-need-an-effect*/} -Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. +Gli Effetti sono una soluzione alternativa (*escape hatch*) dal paradigma di React. Ti permettono di "uscire" da React e sincronizzare i tuoi componenti con un sistema esterno. Se non c'è un sistema esterno coinvolto (per esempio, se vuoi aggiornare lo state di un componente quando cambiano alcune props o lo state), non dovresti aver bisogno di un Effetto. Rimuovere Effetti non necessari renderà il tuo codice più facile da seguire, più veloce da eseguire e meno soggetto a errori. -There are two common cases in which you don't need Effects: -- **You don't need Effects to transform data for rendering.** -- **You don't need Effects to handle user events.** +Ci sono due casi comuni in cui non hai bisogno degli Effetti: +- **Non hai bisogno degli Effetti per trasformare dati per la renderizzazione.** +- **Non hai bisogno degli Effetti per gestire eventi dell'utente.** -For example, you don't need an Effect to adjust some state based on other state: +Per esempio, non hai bisogno di un Effetto per regolare dello state in base ad altro state: ```js {expectedErrors: {'react-compiler': [8]}} {5-9} function Form() { @@ -215,7 +222,7 @@ function Form() { } ``` -Instead, calculate as much as you can while rendering: +Invece, calcola il più possibile durante la renderizzazione: ```js {4-5} function Form() { @@ -227,19 +234,19 @@ function Form() { } ``` -However, you *do* need Effects to synchronize with external systems. +Tuttavia, *hai* bisogno degli Effetti per sincronizzarti con sistemi esterni. -Read **[You Might Not Need an Effect](/learn/you-might-not-need-an-effect)** to learn how to remove unnecessary Effects. +Leggi **[Potresti non avere bisogno di un Effetto](/learn/you-might-not-need-an-effect)** per imparare a rimuovere Effetti non necessari. -## Lifecycle of reactive effects {/*lifecycle-of-reactive-effects*/} +## Ciclo di vita degli Effetti reattivi {/*lifecycle-of-reactive-effects*/} -Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do two things: to start synchronizing something, and later to stop synchronizing it. This cycle can happen multiple times if your Effect depends on props and state that change over time. +Gli Effetti hanno un ciclo di vita diverso dai componenti. I componenti possono montare, aggiornarsi o smontarsi. Un Effetto può fare solo due cose: avviare la sincronizzazione di qualcosa e, in seguito, fermarla. Questo ciclo può ripetersi più volte se il tuo Effetto dipende da props e state che cambiano nel tempo. -This Effect depends on the value of the `roomId` prop. Props are *reactive values,* which means they can change on a re-render. Notice that the Effect *re-synchronizes* (and re-connects to the server) if `roomId` changes: +Questo Effetto dipende dal valore della prop `roomId`. Le props sono *valori reattivi,* il che significa che possono cambiare a ogni ri-renderizzazione. Nota che l'Effetto si *re-sincronizza* (e si riconnette al server) se `roomId` cambia: @@ -302,19 +309,19 @@ button { margin-left: 10px; } -React provides a linter rule to check that you've specified your Effect's dependencies correctly. If you forget to specify `roomId` in the list of dependencies in the above example, the linter will find that bug automatically. +React fornisce una regola del linter per verificare che tu abbia specificato correttamente le dipendenze del tuo Effetto. Se dimentichi di specificare `roomId` nell'elenco delle dipendenze nell'esempio sopra, il linter troverà automaticamente quel bug. -Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to learn how an Effect's lifecycle is different from a component's. +Leggi **[Ciclo di vita degli Effetti reattivi](/learn/lifecycle-of-reactive-effects)** per imparare in che modo il ciclo di vita di un Effetto è diverso da quello di un componente. -## Separating events from Effects {/*separating-events-from-effects*/} +## Separare eventi ed Effetti {/*separating-events-from-effects*/} -Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others. +I gestori di eventi vengono rieseguiti solo quando ripeti la stessa interazione. A differenza dei gestori di eventi, gli Effetti si re-sincronizzano se un valore che leggono, come una prop o una variabile di state, è diverso rispetto all'ultima renderizzazione. A volte vuoi un mix di entrambi i comportamenti: un Effetto che si riesegue in risposta ad alcuni valori ma non ad altri. -All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed: +Tutto il codice all'interno degli Effetti è *reattivo.* Verrà eseguito di nuovo se un valore reattivo che legge è cambiato a causa di una ri-renderizzazione. Per esempio, questo Effetto si riconnetterà alla chat se `roomId` o `theme` sono cambiati: @@ -442,7 +449,7 @@ label { display: block; margin-top: 10px; } -This is not ideal. You want to re-connect to the chat only if the `roomId` has changed. Switching the `theme` shouldn't re-connect to the chat! Move the code reading `theme` out of your Effect into an *Effect Event*: +Non è ideale. Vuoi riconnetterti alla chat solo se `roomId` è cambiato. Cambiare il `theme` non dovrebbe riconnetterti alla chat! Sposta il codice che legge `theme` fuori dal tuo Effetto in un *Effect Event*: @@ -575,19 +582,19 @@ label { display: block; margin-top: 10px; } -Code inside Effect Events isn't reactive, so changing the `theme` no longer makes your Effect re-connect. +Il codice all'interno degli Effect Event non è reattivo, quindi cambiare il `theme` non fa più riconnettere il tuo Effetto. -Read **[Separating Events from Effects](/learn/separating-events-from-effects)** to learn how to prevent some values from re-triggering Effects. +Leggi **[Separare eventi ed Effetti](/learn/separating-events-from-effects)** per imparare a impedire che alcuni valori riattivino gli Effetti. -## Removing Effect dependencies {/*removing-effect-dependencies*/} +## Rimuovere le dipendenze degli Effetti {/*removing-effect-dependencies*/} -When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. The way you remove them depends on the case. +Quando scrivi un Effetto, il linter verifica che tu abbia incluso ogni valore reattivo (come props e state) che l'Effetto legge nell'elenco delle dipendenze del tuo Effetto. Questo garantisce che il tuo Effetto resti sincronizzato con le props e lo state più recenti del tuo componente. Dipendenze non necessarie possono far eseguire il tuo Effetto troppo spesso, o persino creare un loop infinito. Il modo in cui le rimuovi dipende dal caso. -For example, this Effect depends on the `options` object which gets re-created every time you edit the input: +Per esempio, questo Effetto dipende dall'oggetto `options` che viene ricreato ogni volta che modifichi l'input: @@ -662,7 +669,7 @@ button { margin-left: 10px; } -You don't want the chat to re-connect every time you start typing a message in that chat. To fix this problem, move creation of the `options` object inside the Effect so that the Effect only depends on the `roomId` string: +Non vuoi che la chat si riconnetta ogni volta che inizi a digitare un messaggio in quella chat. Per risolvere questo problema, sposta la creazione dell'oggetto `options` all'interno dell'Effetto in modo che l'Effetto dipenda solo dalla stringa `roomId`: @@ -736,19 +743,19 @@ button { margin-left: 10px; } -Notice that you didn't start by editing the dependency list to remove the `options` dependency. That would be wrong. Instead, you changed the surrounding code so that the dependency became *unnecessary.* Think of the dependency list as a list of all the reactive values used by your Effect's code. You don't intentionally choose what to put on that list. The list describes your code. To change the dependency list, change the code. +Nota che non hai iniziato modificando l'elenco delle dipendenze per rimuovere la dipendenza `options`. Sarebbe sbagliato. Invece, hai cambiato il codice circostante in modo che la dipendenza diventasse *non necessaria.* Pensa all'elenco delle dipendenze come a un elenco di tutti i valori reattivi usati dal codice del tuo Effetto. Non scegli intenzionalmente cosa mettere in quell'elenco. L'elenco descrive il tuo codice. Per cambiare l'elenco delle dipendenze, cambia il codice. -Read **[Removing Effect Dependencies](/learn/removing-effect-dependencies)** to learn how to make your Effect re-run less often. +Leggi **[Rimuovere le dipendenze degli Effetti](/learn/removing-effect-dependencies)** per imparare a far rieseguire un Effetto meno spesso. -## Reusing logic with custom Hooks {/*reusing-logic-with-custom-hooks*/} +## Riutilizzare logica con Custom Hook {/*reusing-logic-with-custom-hooks*/} -React comes with built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. To do this, you can create your own Hooks for your application's needs. +React include diversi Hook integrati come `useState`, `useContext` e `useEffect`. A volte vorresti che esistesse un Hook per uno scopo più specifico: ad esempio, per recuperare dati, per tenere traccia se l'utente è online o per connettersi a una chat room. Per farlo, puoi creare i tuoi Hook per le esigenze della tua applicazione. -In this example, the `usePointerPosition` custom Hook tracks the cursor position, while `useDelayedValue` custom Hook returns a value that's "lagging behind" the value you passed by a certain number of milliseconds. Move the cursor over the sandbox preview area to see a moving trail of dots following the cursor: +In questo esempio, il custom Hook `usePointerPosition` tiene traccia della posizione del cursore, mentre il custom Hook `useDelayedValue` restituisce un valore che "resta indietro" rispetto al valore che hai passato di un certo numero di millisecondi. Muovi il cursore sull'area di anteprima della sandbox per vedere una scia di punti che segue il cursore: @@ -829,14 +836,14 @@ body { min-height: 300px; } -You can create custom Hooks, compose them together, pass data between them, and reuse them between components. As your app grows, you will write fewer Effects by hand because you'll be able to reuse custom Hooks you already wrote. There are also many excellent custom Hooks maintained by the React community. +Puoi creare custom Hook, comporli insieme, passare dati tra loro e riutilizzarli tra componenti. Man mano che la tua app cresce, scriverai meno Effetti a mano perché potrai riutilizzare i custom Hook che hai già scritto. Ci sono anche molti ottimi custom Hook mantenuti dalla community React. -Read **[Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks)** to learn how to share logic between components. +Leggi **[Riutilizzare logica con Custom Hook](/learn/reusing-logic-with-custom-hooks)** per imparare a condividere logica tra componenti. -## What's next? {/*whats-next*/} +## Cosa fare dopo? {/*whats-next*/} -Head over to [Referencing Values with Refs](/learn/referencing-values-with-refs) to start reading this chapter page by page! +Vai su [Referenziare valori con i ref](/learn/referencing-values-with-refs) per iniziare a leggere questo capitolo pagina per pagina! diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index b89c65c0c..1b58a9473 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -1,16 +1,23 @@ --- title: renderToString +translationStatus: ai-draft --- + + +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/renderToString.md). + + + -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` non supporta lo streaming né l'attesa dei dati. [Vedi le alternative.](#alternatives) -`renderToString` renders a React tree to an HTML string. +`renderToString` renderizza un albero React in una stringa HTML. ```js const html = renderToString(reactNode, options?) @@ -26,7 +33,7 @@ const html = renderToString(reactNode, options?) ### `renderToString(reactNode, options?)` {/*rendertostring*/} -On the server, call `renderToString` to render your app to HTML. +Sul server, chiama `renderToString` per renderizzare la tua app in HTML. ```js import { renderToString } from 'react-dom/server'; @@ -34,51 +41,51 @@ import { renderToString } from 'react-dom/server'; const html = renderToString(); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Sul client, chiama [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) per idratare l'HTML generato sul server e attivarne l'interattività. -[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 ``. +* `reactNode`: Un nodo React che vuoi renderizzare in HTML. Ad esempio, un nodo JSX come ``. -* **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. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) +* **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. Deve essere lo stesso prefisso passato a [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) #### Returns {/*returns*/} -An HTML string. +Una stringa HTML. #### Caveats {/*caveats*/} -* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML. +* `renderToString` ha un supporto limitato per Suspense. Se un componente sospende, `renderToString` invia immediatamente il suo fallback come HTML. -* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code) +* `renderToString` funziona nel browser, ma usarlo nel codice client [non è consigliato.](#removing-rendertostring-from-the-client-code) --- ## Usage {/*usage*/} -### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/} +### Renderizzare un albero React come HTML in una stringa {/*rendering-a-react-tree-as-html-to-a-string*/} -Call `renderToString` to render your app to an HTML string which you can send with your server response: +Chiama `renderToString` per renderizzare la tua app in una stringa HTML che puoi inviare con la risposta del server: ```js {5-6} import { renderToString } 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 = renderToString(); response.send(html); }); ``` -This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +Questo produrrà l'output HTML iniziale non interattivo dei tuoi componenti React. Sul client, dovrai chiamare [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) per *idratare* quell'HTML generato sul server e attivarne l'interattività. -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` non supporta lo streaming né l'attesa dei dati. [Vedi le alternative.](#alternatives) @@ -86,45 +93,45 @@ This will produce the initial non-interactive HTML output of your React componen ## Alternatives {/*alternatives*/} -### Migrating from `renderToString` to a streaming render on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} +### Migrare da `renderToString` a una renderizzazione in streaming sul server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} -`renderToString` returns a string immediately, so it does not support streaming content as it loads. +`renderToString` restituisce una stringa immediatamente, quindi non supporta lo streaming del contenuto man mano che viene caricato. -When possible, we recommend using these fully-featured alternatives: +Quando possibile, consigliamo di usare queste alternative complete: -* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) +* Se usi Node.js, usa [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +* Se usi Deno o un moderno edge runtime con [Web Streams](https://developer.mozilla.org/it/docs/Web/API/Streams_API), usa [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) -You can continue using `renderToString` if your server environment does not support streams. +Puoi continuare a usare `renderToString` se il tuo ambiente server non supporta gli stream. --- -### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/} +### Migrare da `renderToString` a un prerender statico sul server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/} -`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation. +`renderToString` restituisce una stringa immediatamente, quindi non supporta l'attesa del caricamento dei dati per la generazione di HTML statico. -We recommend using these fully-featured alternatives: +Consigliamo di usare queste alternative complete: -* If you use Node.js, use [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`.](/reference/react-dom/static/prerender) +* Se usi Node.js, usa [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream) +* Se usi Deno o un moderno edge runtime con [Web Streams](https://developer.mozilla.org/it/docs/Web/API/Streams_API), usa [`prerender`.](/reference/react-dom/static/prerender) -You can continue using `renderToString` if your static site generation environment does not support streams. +Puoi continuare a usare `renderToString` se il tuo ambiente di generazione di siti statici non supporta gli stream. --- -### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/} +### Rimuovere `renderToString` dal codice client {/*removing-rendertostring-from-the-client-code*/} -Sometimes, `renderToString` is used on the client to convert some component to HTML. +A volte, `renderToString` viene usato sul client per convertire un componente in HTML. ```js {1-2} -// 🚩 Unnecessary: using renderToString on the client +// 🚩 Non necessario: usare renderToString sul client import { renderToString } from 'react-dom/server'; const html = renderToString(); -console.log(html); // For example, "..." +console.log(html); // Ad esempio, "..." ``` -Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM: +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`](/reference/react-dom/client/createRoot) e leggi l'HTML dal DOM: ```js import { createRoot } from 'react-dom/client'; @@ -135,20 +142,20 @@ const root = createRoot(div); flushSync(() => { root.render(); }); -console.log(div.innerHTML); // For example, "..." +console.log(div.innerHTML); // Ad esempio, "..." ``` -The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property. +La chiamata a [`flushSync`](/reference/react-dom/flushSync) è necessaria affinché il DOM venga aggiornato prima di leggere la proprietà [`innerHTML`](https://developer.mozilla.org/it/docs/Web/API/Element/innerHTML). --- ## Troubleshooting {/*troubleshooting*/} -### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### Quando un componente sospende, l'HTML contiene sempre un fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} -`renderToString` does not fully support Suspense. +`renderToString` non supporta completamente Suspense. -If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [``](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads. +Se un componente sospende (ad esempio, perché è definito con [`lazy`](/reference/react/lazy) o recupera dati), `renderToString` non attenderà che il suo contenuto venga risolto. Invece, `renderToString` troverà il boundary [``](/reference/react/Suspense) più vicino sopra di esso e renderizzerà la sua `fallback` nell'HTML. Il contenuto non apparirà finché non viene caricato il codice client. -To solve this, use one of the [recommended streaming solutions.](#alternatives) For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML. +Per risolvere, usa una delle [soluzioni di streaming consigliate.](#alternatives) 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. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 5991ea5a2..30ffe5039 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -199,7 +199,7 @@ ] }, { - "title": "Escape Hatches", + "title": "Soluzioni alternative", "path": "/learn/escape-hatches", "tags": [ "advanced" @@ -218,7 +218,7 @@ "path": "/learn/synchronizing-with-effects" }, { - "title": "You Might Not Need an Effect", + "title": "Potresti non avere bisogno di un Effetto", "path": "/learn/you-might-not-need-an-effect" }, {