Skip to content

Commit c69bc79

Browse files
deblasisdeblasis
committed
fix(reference): address review for flushSync (PR #670)
Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
1 parent eea6f94 commit c69bc79

8 files changed

Lines changed: 526 additions & 568 deletions

File tree

‎src/content/learn/escape-hatches.md‎

Lines changed: 57 additions & 64 deletions
Large diffs are not rendered by default.

‎src/content/reference/react-dom/flushSync.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Nella maggior parte dei casi, `flushSync` può essere evitato. Usa `flushSync` c
5959
#### Caveats {/*caveats*/}
6060

6161
* `flushSync` può compromettere significativamente le prestazioni. Usalo con parsimonia.
62-
* `flushSync` può forzare i confini Suspense in sospeso a mostrare il loro stato `fallback`.
62+
* `flushSync` può forzare i confini Suspense in sospeso a mostrare il `fallback`.
6363
* `flushSync` può eseguire Effetti in sospeso e applicare in modo sincrono tutti gli aggiornamenti che contengono prima di restituire il controllo.
6464
* `flushSync` può svuotare aggiornamenti al di fuori della callback quando necessario per svuotare gli aggiornamenti all'interno della callback. Ad esempio, se ci sono aggiornamenti in sospeso da un click, React potrebbe svuotarli prima di svuotare gli aggiornamenti all'interno della callback.
6565

@@ -133,7 +133,7 @@ Senza `flushSync`, la finestra di dialogo di stampa mostrerà `isPrinting` come
133133

134134
<Pitfall>
135135

136-
`flushSync` può compromettere significativamente le prestazioni e può forzare in modo imprevisto i confini Suspense in sospeso a mostrare il loro stato fallback.
136+
`flushSync` può compromettere significativamente le prestazioni e può forzare in modo imprevisto i confini Suspense in sospeso a mostrare il `fallback`.
137137

138138
Nella maggior parte dei casi, `flushSync` può essere evitato, quindi usalo come ultima risorsa.
139139

‎src/content/reference/react-dom/server/renderToString.md‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
---
22
title: renderToString
3-
translationStatus: ai-draft
43
---
54

6-
<Note>
7-
8-
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).
9-
10-
</Note>
11-
125
<Pitfall>
136

14-
`renderToString` non supporta lo streaming né l'attesa dei dati. [Vedi le alternative.](#alternatives)
7+
`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
158

169
</Pitfall>
1710

1811
<Intro>
1912

20-
`renderToString` renderizza un albero React in una stringa HTML.
13+
`renderToString` renders a React tree to an HTML string.
2114

2215
```js
2316
const html = renderToString(reactNode, options?)
@@ -33,105 +26,105 @@ const html = renderToString(reactNode, options?)
3326
3427
### `renderToString(reactNode, options?)` {/*rendertostring*/}
3528
36-
Sul server, chiama `renderToString` per renderizzare la tua app in HTML.
29+
On the server, call `renderToString` to render your app to HTML.
3730
3831
```js
3932
import { renderToString } from 'react-dom/server';
4033

4134
const html = renderToString(<App />);
4235
```
4336
44-
Sul client, chiama [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) per idratare l'HTML generato sul server.
37+
On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
4538
46-
[Vedi altri esempi sotto.](#usage)
39+
[See more examples below.](#usage)
4740
4841
#### Parameters {/*parameters*/}
4942
50-
* `reactNode`: Un nodo React che vuoi renderizzare in HTML. Ad esempio, un nodo JSX come `<App />`.
43+
* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.
5144
52-
* **optional** `options`: Un oggetto per la renderizzazione sul server.
53-
* **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)
45+
* **optional** `options`: An object for server render.
46+
* **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)
5447
5548
#### Returns {/*returns*/}
5649
57-
Una stringa HTML.
50+
An HTML string.
5851
5952
#### Caveats {/*caveats*/}
6053
61-
* `renderToString` ha un supporto limitato a Suspense. Se un componente sospende, `renderToString` invia immediatamente il suo fallback come HTML.
54+
* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML.
6255
63-
* `renderToString` funziona nel browser, ma usarlo nel codice client [non è consigliato.](#removing-rendertostring-from-the-client-code)
56+
* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code)
6457
6558
---
6659
6760
## Usage {/*usage*/}
6861
69-
### Renderizzare un albero React come HTML in una stringa {/*rendering-a-react-tree-as-html-to-a-string*/}
62+
### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/}
7063
71-
Chiama `renderToString` per renderizzare la tua app in una stringa HTML che puoi inviare con la risposta del server:
64+
Call `renderToString` to render your app to an HTML string which you can send with your server response:
7265
7366
```js {5-6}
7467
import { renderToString } from 'react-dom/server';
7568

76-
// La sintassi del route handler dipende dal tuo framework backend
69+
// The route handler syntax depends on your backend framework
7770
app.use('/', (request, response) => {
7871
const html = renderToString(<App />);
7972
response.send(html);
8073
});
8174
```
8275
83-
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 renderlo interattivo.
76+
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.
8477
8578
8679
<Pitfall>
8780
88-
`renderToString` non supporta lo streaming né l'attesa dei dati. [Vedi le alternative.](#alternatives)
81+
`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
8982
9083
</Pitfall>
9184
9285
---
9386
9487
## Alternatives {/*alternatives*/}
9588
96-
### Migrare da `renderToString` a una renderizzazione in streaming sul server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
89+
### Migrating from `renderToString` to a streaming render on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
9790
98-
`renderToString` restituisce una stringa immediatamente, quindi non supporta lo streaming del contenuto man mano che viene caricato.
91+
`renderToString` returns a string immediately, so it does not support streaming content as it loads.
9992
100-
Quando possibile, consigliamo di usare queste alternative complete:
93+
When possible, we recommend using these fully-featured alternatives:
10194
102-
* Se usi Node.js, usa [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
103-
* 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)
95+
* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
96+
* 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)
10497
105-
Puoi continuare a usare `renderToString` se il tuo ambiente server non supporta gli stream.
98+
You can continue using `renderToString` if your server environment does not support streams.
10699
107100
---
108101
109-
### Migrare da `renderToString` a un prerender statico sul server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
102+
### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
110103
111-
`renderToString` restituisce una stringa immediatamente, quindi non supporta l'attesa del caricamento dei dati per la generazione di HTML statico.
104+
`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation.
112105
113-
Consigliamo di usare queste alternative complete:
106+
We recommend using these fully-featured alternatives:
114107
115-
* Se usi Node.js, usa [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream)
116-
* 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)
108+
* If you use Node.js, use [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream)
109+
* 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)
117110
118-
Puoi continuare a usare `renderToString` se il tuo ambiente di generazione di siti statici non supporta gli stream.
111+
You can continue using `renderToString` if your static site generation environment does not support streams.
119112
120113
---
121114
122-
### Rimuovere `renderToString` dal codice client {/*removing-rendertostring-from-the-client-code*/}
115+
### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
123116
124-
A volte, `renderToString` viene usato sul client per convertire un componente in HTML.
117+
Sometimes, `renderToString` is used on the client to convert some component to HTML.
125118
126119
```js {1-2}
127-
// 🚩 Non necessario: usare renderToString sul client
120+
// 🚩 Unnecessary: using renderToString on the client
128121
import { renderToString } from 'react-dom/server';
129122

130123
const html = renderToString(<MyIcon />);
131-
console.log(html); // Ad esempio, "<svg>...</svg>"
124+
console.log(html); // For example, "<svg>...</svg>"
132125
```
133126
134-
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:
127+
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:
135128
136129
```js
137130
import { createRoot } from 'react-dom/client';
@@ -142,20 +135,20 @@ const root = createRoot(div);
142135
flushSync(() => {
143136
root.render(<MyIcon />);
144137
});
145-
console.log(div.innerHTML); // Ad esempio, "<svg>...</svg>"
138+
console.log(div.innerHTML); // For example, "<svg>...</svg>"
146139
```
147140
148-
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).
141+
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.
149142
150143
---
151144
152145
## Troubleshooting {/*troubleshooting*/}
153146
154-
### Quando un componente sospende, l'HTML contiene sempre un fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/}
147+
### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/}
155148
156-
`renderToString` non supporta completamente Suspense.
149+
`renderToString` does not fully support Suspense.
157150
158-
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 confine [`<Suspense>`](/reference/react/Suspense) più vicino sopra di esso e renderizzerà la sua prop `fallback` nell'HTML. Il contenuto non apparirà finché non viene caricato il codice client.
151+
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 [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
159152
160-
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.
153+
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.
161154

0 commit comments

Comments
 (0)