diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index 45c0090d5..a5b19ba32 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -1,39 +1,46 @@ --- -title: "Sunsetting Create React App" +title: "Deprecazione di Create React App" author: Matt Carroll and Ricky Hanlon date: 2025/02/14 -description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. +description: Oggi depreciamo Create React App per le nuove app e incoraggiamo le app esistenti a migrare a un framework o a un build tool come Vite, Parcel o RSBuild. Forniamo anche documentazione per quando un framework non è adatto al tuo progetto, vuoi costruire il tuo framework o vuoi semplicemente imparare come funziona React costruendo un'app React da zero. +translationStatus: ai-draft --- -February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm) +14 febbraio 2025 di [Matt Carroll](https://twitter.com/mattcarrollcode) e [Ricky Hanlon](https://bsky.app/profile/ricky.fm) --- + + +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/blog/2025/02/14/sunsetting-create-react-app.md). + + + -Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. +Oggi depreciamo [Create React App](https://create-react-app.dev/) per le nuove app e incoraggiamo le app esistenti a migrare a un [framework](#how-to-migrate-to-a-framework) o a [migrare a un build tool](#how-to-migrate-to-a-build-tool) come Vite, Parcel o RSBuild. -We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch). +Forniamo anche documentazione per quando un framework non è adatto al tuo progetto, vuoi costruire il tuo framework o vuoi semplicemente imparare come funziona React [costruendo un'app React da zero](/learn/build-a-react-app-from-scratch). ----- -When we released Create React App in 2016, there was no clear way to build a new React app. +Quando abbiamo rilasciato Create React App nel 2016, non c'era un modo chiaro per costruire una nuova app React. -To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features. +Per creare un'app React, dovevi installare un mucchio di strumenti e collegarli insieme per supportare funzionalità di base come JSX, linting e hot reloading. Era molto difficile farlo correttamente, quindi la [community](https://github.com/react-boilerplate/react-boilerplate) [ha creato](https://github.com/kriasoft/react-starter-kit) [boilerplate](https://github.com/petehunt/react-boilerplate) per [setup](https://github.com/gaearon/react-hot-boilerplate) [comuni](https://github.com/erikras/react-redux-universal-hot-example). Tuttavia, i boilerplate erano difficili da aggiornare e la frammentazione rendeva difficile per React rilasciare nuove funzionalità. -Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience. +Create React App ha risolto questi problemi combinando diversi strumenti in una singola configurazione raccomandata. Questo ha permesso alle app un modo semplice per aggiornarsi alle nuove funzionalità del tooling e ha permesso al team React di distribuire cambiamenti di tooling non banali (supporto Fast Refresh, regole lint React Hooks) al pubblico più ampio possibile. -This model became so popular that there's an entire category of tools working this way today. +Questo modello è diventato così popolare che oggi esiste un'intera categoria di strumenti che funzionano in questo modo. -## Deprecating Create React App {/*deprecating-create-react-app*/} +## Deprecazione di Create React App {/*deprecating-create-react-app*/} -Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks). +Sebbene Create React App renda facile iniziare, [ci sono diverse limitazioni](#limitations-of-build-tools) che rendono difficile costruire app di produzione ad alte performance. In linea di principio, potremmo risolvere questi problemi evolvendo essenzialmente Create React App in un [framework](#why-we-recommend-frameworks). -However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App. +Tuttavia, poiché Create React App attualmente non ha maintainer attivi e ci sono molti framework esistenti che risolvono già questi problemi, abbiamo deciso di deprecare Create React App. -Starting today, if you install a new app, you will see a deprecation warning: +A partire da oggi, se installi una nuova app, vedrai un avviso di deprecazione: @@ -48,48 +55,48 @@ This error message will only be shown once per install. -We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. +Abbiamo anche aggiunto un avviso di deprecazione al [sito web](https://create-react-app.dev/) e al [repo](https://github.com/facebook/create-react-app) GitHub di Create React App. Create React App continuerà a funzionare in modalità manutenzione, e abbiamo pubblicato una nuova versione di Create React App compatibile con React 19. -## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/} -We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server. +## Come migrare a un framework {/*how-to-migrate-to-a-framework*/} +Raccomandiamo di [creare nuove app React](/learn/creating-a-react-app) con un framework. Tutti i framework che raccomandiamo supportano client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) e single-page app ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), e possono essere distribuiti su un CDN o un servizio di hosting statico senza un server. -For existing apps, these guides will help you migrate to a client-only SPA: +Per le app esistenti, queste guide ti aiuteranno a migrare a una SPA solo client: -* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) -* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes). -* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/) +* [Guida di migrazione Create React App di Next.js](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) +* [Guida all'adozione framework di React Router](https://reactrouter.com/upgrading/component-routes). +* [Guida di migrazione Expo webpack a Expo Router](https://docs.expo.dev/router/migrate/from-expo-webpack/) -## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/} +## Come migrare a un build tool {/*how-to-migrate-to-a-build-tool*/} -If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild. +Se la tua app ha vincoli insoliti, preferisci risolvere questi problemi costruendo il tuo framework, o vuoi semplicemente imparare come funziona React da zero, puoi creare la tua configurazione personalizzata con React usando Vite, Parcel o Rsbuild. -For existing apps, these guides will help you migrate to a build tool: +Per le app esistenti, queste guide ti aiuteranno a migrare a un build tool: -* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/) -* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/) -* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra) +* [Guida di migrazione Create React App con Vite](https://www.robinwieruch.de/vite-create-react-app/) +* [Guida di migrazione Create React App con Parcel](https://parceljs.org/migration/cra/) +* [Guida di migrazione Create React App con Rsbuild](https://rsbuild.dev/guide/migration/cra) -To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch). +Per aiutarti a iniziare con Vite, Parcel o Rsbuild, abbiamo aggiunto nuova documentazione per [Building a React App from Scratch](/learn/build-a-react-app-from-scratch). -#### Do I need a framework? {/*do-i-need-a-framework*/} +#### Ho bisogno di un framework? {/*do-i-need-a-framework*/} -Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. +La maggior parte delle app trarrebbe beneficio da un framework, ma ci sono casi validi per costruire un'app React da zero. Una buona regola empirica è che se la tua app ha bisogno di routing, probabilmente trarresti beneficio da un framework. -Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself. +Proprio come Svelte ha Sveltekit, Vue ha Nuxt e Solid ha SolidStart, [React raccomanda di usare un framework](#why-we-recommend-frameworks) che integra completamente il routing in funzionalità come data-fetching e code-splitting out of the box. Questo evita il dolore di dover scrivere configurazioni complesse e costruire essenzialmente un framework da solo. -However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild. +Tuttavia, puoi sempre [costruire un'app React da zero](/learn/build-a-react-app-from-scratch) usando un build tool come Vite, Parcel o Rsbuild. -Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks). +Continua a leggere per saperne di più sulle [limitazioni dei build tool](#limitations-of-build-tools) e [perché raccomandiamo i framework](#why-we-recommend-frameworks). -## Limitations of Build Tools {/*limitations-of-build-tools*/} +## Limitazioni dei build tool {/*limitations-of-build-tools*/} -Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build. +Create React App e build tool simili rendono facile iniziare a costruire un'app React. Dopo aver eseguito `npx create-react-app my-app`, ottieni un'app React completamente configurata con un development server, linting e una build di produzione. -For example, if you're building an internal admin tool, you can start with a landing page: +Ad esempio, se stai costruendo uno strumento admin interno, puoi iniziare con una landing page: ```js export default function App() { @@ -101,13 +108,13 @@ export default function App() { } ``` -This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app. +Questo ti consente di iniziare immediatamente a scrivere codice in React con funzionalità come JSX, regole lint predefinite e un bundler da usare sia in development che in produzione. Tuttavia, questo setup manca degli strumenti necessari per costruire una vera app di produzione. -Most production apps need solutions to problems like routing, data fetching, and code splitting. +La maggior parte delle app di produzione ha bisogno di soluzioni a problemi come routing, data fetching e code splitting. ### Routing {/*routing*/} -Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time: +Create React App non include una soluzione di routing specifica. Se stai iniziando, un'opzione è usare `useState` per passare tra le route. Ma farlo significa che non puoi condividere link alla tua app — ogni link andrebbe alla stessa pagina — e strutturare la tua app diventa difficile nel tempo: ```js import {useState} from 'react'; @@ -127,7 +134,7 @@ export default function App() { } ``` -This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes: +Ecco perché la maggior parte delle app che usano Create React App aggiunge il routing con una libreria di routing come [React Router](https://reactrouter.com/) o [Tanstack Router](https://tanstack.com/router/latest). Con una libreria di routing, puoi aggiungere route aggiuntive all'app, che fornisce opinioni sulla struttura della tua app e ti consente di iniziare a condividere link alle route. Ad esempio, con React Router puoi definire le route: ```js import {RouterProvider, createBrowserRouter} from 'react-router'; @@ -148,15 +155,15 @@ export default function App() { } ``` -With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library. +Con questo cambiamento, puoi condividere un link a `/dashboard` e l'app navigherà alla pagina dashboard. Una volta che hai una libreria di routing, puoi aggiungere funzionalità aggiuntive come route annidate, route guards e transizioni di route, che sono difficili da implementare senza una libreria di routing. -There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it. +Qui c'è un tradeoff: la libreria di routing aggiunge complessità all'app, ma aggiunge anche funzionalità difficili da implementare senza di essa. -### Data Fetching {/*data-fetching*/} +### Recupero dati {/*data-fetching*/} -Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data. +Un altro problema comune in Create React App è il data fetching. Create React App non include una soluzione di data fetching specifica. Se stai iniziando, un'opzione comune è usare `fetch` in un Effetto per caricare i dati. -But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading: +Ma farlo significa che i dati vengono recuperati dopo che il componente renderizza, il che può causare network waterfall. I network waterfall sono causati dal recuperare dati quando la tua app renderizza invece che in parallelo mentre il codice si sta scaricando: ```js export default function Dashboard() { @@ -177,9 +184,9 @@ export default function Dashboard() { } ``` -Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. +Recuperare dati in un Effetto significa che l'utente deve aspettare più a lungo per vedere il contenuto, anche se i dati avrebbero potuto essere recuperati prima. Per risolvere, puoi usare una libreria di data fetching come [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react) o [Relay](https://relay.dev/) che forniscono opzioni per prefetchare i dati così la richiesta inizia prima che il componente renderizzi. -These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches: +Queste librerie funzionano al meglio quando integrate con il pattern "loader" del tuo routing per specificare le dipendenze dati a livello di route, il che consente al router di ottimizzare i tuoi fetch di dati: ```js export async function loader() { @@ -198,21 +205,21 @@ export default function Dashboard({loaderData}) { } ``` -On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience. +Al caricamento iniziale, il router può recuperare i dati immediatamente prima che la route venga renderizzata. Mentre l'utente naviga nell'app, il router è in grado di recuperare sia i dati che la route contemporaneamente, parallelizzando i fetch. Questo riduce il tempo necessario per vedere il contenuto sullo schermo e può migliorare l'esperienza utente. -However, this requires correctly configuring the loaders in your app and trades off complexity for performance. +Tuttavia, questo richiede di configurare correttamente i loader nella tua app e scambia complessità per performance. -### Code Splitting {/*code-splitting*/} +### Suddivisione del codice {/*code-splitting*/} -Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all. +Un altro problema comune in Create React App è il [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App non include una soluzione di code splitting specifica. Se stai iniziando, potresti non considerare affatto il code splitting. -This means your app is shipped as a single bundle: +Ciò significa che la tua app viene spedita come un singolo bundle: ```txt - bundle.js 75kb ``` -But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on. +Ma per performance ideali, dovresti "dividere" il tuo codice in bundle separati così l'utente deve scaricare solo ciò di cui ha bisogno. Questo riduce il tempo che l'utente deve aspettare per caricare la tua app, scaricando solo il codice necessario per vedere la pagina in cui si trova. ```txt - core.js 25kb @@ -220,7 +227,7 @@ But for ideal performance, you should "split" your code into separate bundles so - dashboard.js 25kb ``` -One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded: +Un modo per fare code-splitting è con `React.lazy`. Tuttavia, ciò significa che il codice non viene recuperato finché il componente non renderizza, il che può causare network waterfall. Una soluzione più ottimale è usare una funzionalità del router che recupera il codice in parallelo mentre il codice si sta scaricando. Ad esempio, React Router fornisce un'opzione `lazy` per specificare che una route deve essere code split e ottimizzare quando viene caricata: ```js import Home from './Home'; @@ -233,13 +240,13 @@ const router = createBrowserRouter([ ]); ``` -Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns. +Un code-splitting ottimizzato è difficile da fare bene, ed è facile commettere errori che possono far scaricare all'utente più codice del necessario. Funziona al meglio quando integrato con le soluzioni di router e data loading per massimizzare la cache, parallelizzare i fetch e supportare pattern ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction). -### And more... {/*and-more*/} +### E altro... {/*and-more*/} -These are just a few examples of the limitations of Create React App. +Questi sono solo alcuni esempi delle limitazioni di Create React App. -Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like: +Una volta integrato routing, data-fetching e code splitting, devi anche considerare pending state, interruzioni di navigazione, messaggi di errore all'utente e revalidazione dei dati. Ci sono intere categorie di problemi che gli utenti devono risolvere come:
-All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). +Tutti questi lavorano insieme per creare la [loading sequence](https://www.patterns.dev/vanilla/loading-sequence) più ottimale. -Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve. +Risolvere ciascuno di questi problemi individualmente in Create React App può essere difficile poiché ogni problema è interconnesso con gli altri e può richiedere competenze approfondite in aree che gli utenti potrebbero non conoscere. Per risolvere questi problemi, gli utenti finiscono per costruire soluzioni su misura sopra Create React App, che era esattamente il problema che Create React App cercava di risolvere. -## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/} +## Perché raccomandiamo i framework {/*why-we-recommend-frameworks*/} -Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users. +Sebbene potresti risolvere tutti questi pezzi da solo in un build tool come Create React App, Vite o Parcel, è difficile farlo bene. Proprio come quando Create React App stesso integrava diversi build tool insieme, hai bisogno di uno strumento che integri tutte queste funzionalità insieme per offrire la migliore esperienza agli utenti. -This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks". +Questa categoria di strumenti che integra build tool, rendering, routing, data fetching e code splitting è nota come "framework" — o se preferisci chiamare React stesso un framework, potresti chiamarli "metaframework". -Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects. +I framework impongono alcune opinioni sulla strutturazione della tua app per fornire un'esperienza utente molto migliore, nello stesso modo in cui i build tool impongono alcune opinioni per rendere il tooling più facile. Ecco perché abbiamo iniziato a raccomandare framework come [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/) ed [Expo](https://expo.dev/) per i nuovi progetti. -Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps. +I framework forniscono la stessa esperienza di getting started di Create React App, ma forniscono anche soluzioni ai problemi che gli utenti devono comunque risolvere nelle app di produzione reali. -#### Server rendering is optional {/*server-rendering-is-optional*/} +#### La renderizzazione lato server è opzionale {/*server-rendering-is-optional*/} -The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app. +I framework che raccomandiamo offrono tutti l'opzione di creare un'app [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR). -In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation. +In alcuni casi, CSR è la scelta giusta per una pagina, ma spesso non lo è. Anche se la maggior parte della tua app è client-side, spesso ci sono singole pagine che potrebbero trarre beneficio da funzionalità di server rendering come [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) o [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), ad esempio una pagina Terms of Service o documentazione. -Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. +Il server rendering in genere invia meno JavaScript al client e un documento HTML completo che produce un [First Contentful Paint (FCP)](https://web.dev/articles/fcp) più veloce riducendo il [Total Blocking Time (TBD)](https://web.dev/articles/tbt), il che può anche abbassare l'[Interaction to Next Paint (INP)](https://web.dev/articles/inp). Ecco perché il [team Chrome ha incoraggiato](https://web.dev/articles/rendering-on-the-web) gli sviluppatori a considerare static o server-side render rispetto a un approccio completamente client-side per ottenere le migliori performance possibili. -There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy. +Ci sono tradeoff nell'usare un server, e non è sempre l'opzione migliore per ogni pagina. Generare pagine sul server comporta costi aggiuntivi e richiede tempo per generare, il che può aumentare il [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). Le app con le migliori performance sono in grado di scegliere la strategia di rendering giusta pagina per pagina, in base ai tradeoff di ciascuna strategia. -Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app. +I framework offrono l'opzione di usare un server su qualsiasi pagina se lo desideri, ma non ti obbligano a usare un server. Questo ti consente di scegliere la strategia di rendering giusta per ogni pagina nella tua app. -#### What About Server Components {/*server-components*/} +#### E i Server Components? {/*server-components*/} -The frameworks we recommend also include support for React Server Components. +I framework che raccomandiamo includono anche supporto per React Server Components. -Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). +I Server Component aiutano a risolvere questi problemi spostando routing e data fetching sul server, e consentendo al code splitting di essere fatto per i componenti client in base ai dati che renderizzi, invece che solo alla route renderizzata, e riducendo la quantità di JavaScript spedita per la migliore [loading sequence](https://www.patterns.dev/vanilla/loading-sequence) possibile. -Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app. +I Server Component non richiedono un server. Possono essere eseguiti al build time sul tuo server CI per creare un'app static-site generated (SSG), a runtime su un web server per un'app server-side rendered (SSR). -See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info. +Consulta [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) e [la documentazione](/reference/rsc/server-components) per maggiori informazioni. -#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/} +#### La renderizzazione lato server non serve solo per la SEO {/*server-rendering-is-not-just-for-seo*/} -A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO). +Un malinteso comune è che il server rendering serva solo per la [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO). -While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen. +Sebbene il server rendering possa migliorare la SEO, migliora anche le performance riducendo la quantità di JavaScript che l'utente deve scaricare e parsare prima di poter vedere il contenuto sullo schermo. -This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. +Ecco perché il team Chrome [ha incoraggiato](https://web.dev/articles/rendering-on-the-web) gli sviluppatori a considerare static o server-side render rispetto a un approccio completamente client-side per ottenere le migliori performance possibili. --- -_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._ - +_Grazie a [Dan Abramov](https://bsky.app/profile/danabra.mov) per aver creato Create React App, e a [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb) e [molti altri](https://github.com/facebook/create-react-app/graphs/contributors) per aver mantenuto Create React App nel corso degli anni. Grazie a [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com) e [Theo Browne](https://x.com/theo) per la revisione e il feedback su questo post._ diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index feee6cdb6..ae7a93303 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -2,32 +2,39 @@ title: "React 19.2" author: The React Team date: 2025/10/01 -description: React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. +description: React 19.2 aggiunge nuove funzionalità come Activity, React Performance Tracks, useEffectEvent e altro. +translationStatus: ai-draft --- -October 1, 2025 by [The React Team](/community/team) +1 ottobre 2025 del [React Team](/community/team) --- + + +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/blog/2025/10/01/react-19-2.md). + + + -React 19.2 is now available on npm! +React 19.2 è ora disponibile su npm! -This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we'll give an overview of the new features in React 19.2, and highlight some notable changes. +Questa è la nostra terza release nell'ultimo anno, dopo React 19 a dicembre e React 19.1 a giugno. In questo post daremo una panoramica delle nuove funzionalità in React 19.2 e metteremo in evidenza alcuni cambiamenti notevoli. --- -## New React Features {/*new-react-features*/} +## Nuove funzionalità di React {/*new-react-features*/} ### `` {/*activity*/} -`` lets you break your app into "activities" that can be controlled and prioritized. +`` ti consente di suddividere la tua app in "activities" che possono essere controllate e priorizzate. -You can use Activity as an alternative to conditionally rendering parts of your app: +Puoi usare Activity come alternativa alla renderizzazione condizionale di parti della tua app: ```js // Before @@ -39,24 +46,24 @@ You can use Activity as an alternative to conditionally rendering parts of your ``` -In React 19.2, Activity supports two modes: `visible` and `hidden`. +In React 19.2, Activity supporta due modalità: `visible` e `hidden`. -- `hidden`: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. -- `visible`: shows the children, mounts effects, and allows updates to be processed normally. +- `hidden`: nasconde i figli, smonta gli Effetti e rimanda tutti gli aggiornamenti finché React non ha più nulla su cui lavorare. +- `visible`: mostra i figli, monta gli Effetti e consente agli aggiornamenti di essere elaborati normalmente. -This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen. +Ciò significa che puoi pre-renderizzare e continuare a renderizzare parti nascoste dell'app senza impattare le performance di ciò che è visibile sullo schermo. -You can use Activity to render hidden parts of the app that a user is likely to navigate to next, or to save the state of parts the user navigates away from. This helps make navigations quicker by loading data, css, and images in the background, and allows back navigations to maintain state such as input fields. +Puoi usare Activity per renderizzare parti nascoste dell'app verso cui l'utente probabilmente navigherà in seguito, o per salvare lo state di parti da cui l'utente si allontana. Questo aiuta a rendere le navigazioni più rapide caricando dati, CSS e immagini in background, e consente alle navigazioni indietro di mantenere lo state come i campi di input. -In the future, we plan to add more modes to Activity for different use cases. +In futuro, prevediamo di aggiungere altre modalità ad Activity per casi d'uso diversi. -For examples on how to use Activity, check out the [Activity docs](/reference/react/Activity). +Per esempi su come usare Activity, consulta la [documentazione di Activity](/reference/react/Activity). --- ### `useEffectEvent` {/*use-effect-event*/} -One common pattern with `useEffect` is to notify the app code about some kind of "events" from an external system. For example, when a chat room gets connected, you might want to display a notification: +Un pattern comune con `useEffect` è notificare al codice dell'app qualche tipo di "evento" da un sistema esterno. Ad esempio, quando una chat room si connette, potresti voler mostrare una notifica: ```js {5,11} function ChatRoom({ roomId, theme }) { @@ -73,11 +80,11 @@ function ChatRoom({ roomId, theme }) { // ... ``` -The problem with the code above is that a change to any values used inside such an "event" will cause the surrounding Effect to re-run. For example, changing the `theme` will cause the chat room to reconnect. This makes sense for values related to the Effect logic itself, like `roomId`, but it doesn't make sense for `theme`. +Il problema con il codice sopra è che un cambiamento a qualsiasi valore usato dentro un simile "evento" causerà la ri-esecuzione dell'Effetto circostante. Ad esempio, cambiare `theme` causerà la riconnessione della chat room. Questo ha senso per valori legati alla logica dell'Effetto stesso, come `roomId`, ma non ha senso per `theme`. -To solve this, most users just disable the lint rule and exclude the dependency. But that can lead to bugs since the linter can no longer help you keep the dependencies up to date if you need to update the Effect later. +Per risolvere, la maggior parte degli utenti disabilita semplicemente la regola lint ed esclude la dipendenza. Ma questo può portare a bug poiché il linter non può più aiutarti a mantenere le dipendenze aggiornate se devi modificare l'Effetto in seguito. -With `useEffectEvent`, you can split the "event" part of this logic out of the Effect that emits it: +Con `useEffectEvent`, puoi separare la parte "evento" di questa logica dall'Effetto che lo emette: ```js {2,3,4,9} function ChatRoom({ roomId, theme }) { @@ -96,17 +103,17 @@ function ChatRoom({ roomId, theme }) { // ... ``` -Similar to DOM events, Effect Events always “see” the latest props and state. +Simile agli eventi DOM, gli Effect Events "vedono" sempre le props e lo state più recenti. -**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@latest` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter. +**Gli Effect Events _non_ devono essere dichiarati nell'array di dipendenze**. Dovrai aggiornare a `eslint-plugin-react-hooks@latest` così che il linter non provi a inserirli come dipendenze. Nota che gli Effect Events possono essere dichiarati solo nello stesso componente o Hook del "loro" Effetto. Queste restrizioni sono verificate dal linter. -#### When to use `useEffectEvent` {/*when-to-use-useeffectevent*/} +#### Quando usare `useEffectEvent` {/*when-to-use-useeffectevent*/} -You should use `useEffectEvent` for functions that are conceptually "events" that happen to be fired from an Effect instead of a user event (that's what makes it an "Effect Event"). You don't need to wrap everything in `useEffectEvent`, or to use it just to silence the lint error, as this can lead to bugs. +Dovresti usare `useEffectEvent` per funzioni che sono concettualmente "eventi" che accadono di essere emessi da un Effetto invece che da un evento utente (ecco cosa lo rende un "Effect Event"). Non devi avvolgere tutto in `useEffectEvent`, o usarlo solo per silenziare l'errore lint, poiché questo può portare a bug. -For a deep dive on how to think about Event Effects, see: [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects). +Per un approfondimento su come pensare agli Event Effects, vedi: [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects). @@ -116,11 +123,11 @@ For a deep dive on how to think about Event Effects, see: [Separating Events fro -`cacheSignal` is only for use with [React Server Components](/reference/rsc/server-components). +`cacheSignal` è solo per l'uso con [React Server Components](/reference/rsc/server-components). -`cacheSignal` allows you to know when the [`cache()`](/reference/react/cache) lifetime is over: +`cacheSignal` ti consente di sapere quando la durata di [`cache()`](/reference/react/cache) è terminata: ``` import {cache, cacheSignal} from 'react'; @@ -131,19 +138,19 @@ async function Component() { } ``` -This allows you to clean up or abort work when the result will no longer be used in the cache, such as: +Questo ti consente di pulire o abortire il lavoro quando il risultato non sarà più usato nella cache, ad esempio: -- React has successfully completed rendering -- The render was aborted -- The render has failed +- React ha completato con successo la renderizzazione +- La renderizzazione è stata abortita +- La renderizzazione è fallita -For more info, see the [`cacheSignal` docs](/reference/react/cacheSignal). +Per maggiori informazioni, consulta la [documentazione di `cacheSignal`](/reference/react/cacheSignal). --- ### Performance Tracks {/*performance-tracks*/} -React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to Chrome DevTools performance profiles to provide more information about the performance of your React app: +React 19.2 aggiunge un nuovo set di [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) ai profili di performance di Chrome DevTools per fornire più informazioni sulle performance della tua app React:
@@ -156,35 +163,35 @@ React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/d
-The [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks) explain everything included in the tracks, but here is a high-level overview. +La [documentazione React Performance Tracks](/reference/dev-tools/react-performance-tracks) spiega tutto ciò che è incluso nelle track, ma ecco una panoramica ad alto livello. #### Scheduler ⚛ {/*scheduler-*/} -The Scheduler track shows what React is working on for different priorities such as "blocking" for user interactions, or "transition" for updates inside startTransition. Inside each track, you will see the type of work being performed such as the event that scheduled an update, and when the render for that update happened. +La track Scheduler mostra su cosa sta lavorando React per diverse priorità come "blocking" per le interazioni utente, o "transition" per gli aggiornamenti dentro startTransition. Dentro ogni track, vedrai il tipo di lavoro eseguito come l'evento che ha schedulato un aggiornamento, e quando è avvenuta la renderizzazione per quell'aggiornamento. -We also show information such as when an update is blocked waiting for a different priority, or when React is waiting for paint before continuing. The Scheduler track helps you understand how React splits your code into different priorities, and the order it completed the work. +Mostriamo anche informazioni come quando un aggiornamento è bloccato in attesa di una priorità diversa, o quando React sta aspettando il paint prima di continuare. La track Scheduler ti aiuta a capire come React divide il tuo codice in diverse priorità e l'ordine in cui ha completato il lavoro. -See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs to see everything included. +Consulta la [documentazione della track Scheduler](/reference/dev-tools/react-performance-tracks#scheduler) per vedere tutto ciò che è incluso. #### Components ⚛ {/*components-*/} -The Components track shows the tree of components that React is working on either to render or run effects. Inside you'll see labels such as "Mount" for when children mount or effects are mounted, or "Blocked" for when rendering is blocked due to yielding to work outside React. +La track Components mostra l'albero dei componenti su cui React sta lavorando per renderizzare o eseguire Effetti. Al suo interno vedrai etichette come "Mount" per quando i figli montano o gli Effetti vengono montati, o "Blocked" per quando la renderizzazione è bloccata a causa del cedere il passo a lavoro fuori da React. -The Components track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems. +La track Components ti aiuta a capire quando i componenti vengono renderizzati o eseguono Effetti, e il tempo necessario per completare quel lavoro per aiutare a identificare problemi di performance. -See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included. +Consulta la [documentazione della track Components](/reference/dev-tools/react-performance-tracks#components) per vedere tutto ciò che è incluso. --- -## New React DOM Features {/*new-react-dom-features*/} +## Nuove funzionalità di React DOM {/*new-react-dom-features*/} -### Partial Pre-rendering {/*partial-pre-rendering*/} +### Pre-renderizzazione parziale {/*partial-pre-rendering*/} -In 19.2 we're adding a new capability to pre-render part of the app ahead of time, and resume rendering it later. +In 19.2 aggiungiamo una nuova capacità di pre-renderizzare parte dell'app in anticipo e riprendere la renderizzazione in seguito. -This feature is called "Partial Pre-rendering", and allows you to pre-render the static parts of your app and serve it from a CDN, and then resume rendering the shell to fill it in with dynamic content later. +Questa funzionalità si chiama "Partial Pre-rendering" e ti consente di pre-renderizzare le parti statiche della tua app e servirle da un CDN, per poi riprendere la renderizzazione dello shell e riempirlo con contenuto dinamico in seguito. -To pre-render an app to resume later, first call `prerender` with an `AbortController`: +Per pre-renderizzare un'app da riprendere in seguito, prima chiama `prerender` con un `AbortController`: ``` const {prelude, postponed} = await prerender(, { @@ -197,7 +204,7 @@ await savePostponedState(postponed); // Send prelude to client or CDN. ``` -Then, you can return the `prelude` shell to the client, and later call `resume` to "resume" to a SSR stream: +Poi, puoi restituire lo shell `prelude` al client e in seguito chiamare `resume` per "riprendere" a uno stream SSR: ``` const postponed = await getPostponedState(request); @@ -206,7 +213,7 @@ const resumeStream = await resume(, postponed); // Send stream to client. ``` -Or you can call `resumeAndPrerender` to resume to get static HTML for SSG: +Oppure puoi chiamare `resumeAndPrerender` per riprendere e ottenere HTML statico per SSG: ``` const postponedState = await getPostponedState(request); @@ -215,73 +222,73 @@ const { prelude } = await resumeAndPrerender(, postponedState); // Send complete HTML prelude to CDN. ``` -For more info, see the docs for the new APIs: +Per maggiori informazioni, consulta la documentazione per le nuove API: - `react-dom/server` - - [`resume`](/reference/react-dom/server/resume): for Web Streams. - - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) for Node Streams. + - [`resume`](/reference/react-dom/server/resume): per Web Streams. + - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) per Node Streams. - `react-dom/static` - - [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) for Web Streams. - - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) for Node Streams. + - [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) per Web Streams. + - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) per Node Streams. -Additionally, the prerender apis now return a `postpone` state to pass to the `resume` apis. +Inoltre, le API prerender ora restituiscono uno state `postpone` da passare alle API `resume`. --- -## Notable Changes {/*notable-changes*/} +## Cambiamenti notevoli {/*notable-changes*/} -### Batching Suspense Boundaries for SSR {/*batching-suspense-boundaries-for-ssr*/} +### Raggruppamento dei boundary Suspense per SSR {/*batching-suspense-boundaries-for-ssr*/} -We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering. +Abbiamo corretto un bug comportamentale per cui i boundary Suspense venivano rivelati in modo diverso a seconda che fossero renderizzati sul client o durante lo streaming da server-side rendering. -Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior. +A partire da 19.2, React raggrupperà per un breve periodo le rivelazioni dei boundary Suspense renderizzati sul server, per consentire di rivelare più contenuto insieme e allinearsi al comportamento renderizzato sul client. -Previously, during streaming server-side rendering, suspense content would immediately replace fallbacks. +In precedenza, durante lo streaming server-side rendering, il contenuto suspense sostituiva immediatamente i fallback. -In React 19.2, suspense boundaries are batched for a small amount of time, to allow revealing more content together. +In React 19.2, i boundary suspense vengono raggruppati per un breve periodo, per consentire di rivelare più contenuto insieme. -This fix also prepares apps for supporting `` for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together. +Questa correzione prepara anche le app al supporto di `` per Suspense durante SSR. Rivelando più contenuto insieme, le animazioni possono essere eseguite su batch più grandi di contenuto ed evitare di concatenare animazioni di contenuto che arriva in streaming ravvicinato. -React uses heuristics to ensure throttling does not impact core web vitals and search ranking. +React usa euristiche per garantire che il throttling non impatti le core web vitals e il ranking di ricerca. -For example, if the total page load time is approaching 2.5s (which is the time considered "good" for [LCP](https://web.dev/articles/lcp)), React will stop batching and reveal content immediately so that the throttling is not the reason to miss the metric. +Ad esempio, se il tempo totale di caricamento della pagina si avvicina a 2,5s (che è il tempo considerato "buono" per [LCP](https://web.dev/articles/lcp)), React smetterà di raggruppare e rivelerà il contenuto immediatamente così che il throttling non sia la ragione per mancare la metrica. --- -### SSR: Web Streams support for Node {/*ssr-web-streams-support-for-node*/} +### SSR: supporto Web Streams per Node {/*ssr-web-streams-support-for-node*/} -React 19.2 adds support for Web Streams for streaming SSR in Node.js: -- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) is now available for Node.js -- [`prerender`](/reference/react-dom/static/prerender) is now available for Node.js +React 19.2 aggiunge supporto per Web Streams per lo streaming SSR in Node.js: +- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) è ora disponibile per Node.js +- [`prerender`](/reference/react-dom/static/prerender) è ora disponibile per Node.js -As well as the new `resume` APIs: -- [`resume`](/reference/react-dom/server/resume) is available for Node.js. -- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) is available for Node.js. +Così come le nuove API `resume`: +- [`resume`](/reference/react-dom/server/resume) è disponibile per Node.js. +- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) è disponibile per Node.js. -#### Prefer Node Streams for server-side rendering in Node.js {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/} +#### Preferire Node Streams per la renderizzazione lato server in Node.js {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/} -In Node.js environments, we still highly recommend using the Node Streams APIs: +Negli ambienti Node.js, raccomandiamo ancora vivamente di usare le API Node Streams: - [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) - [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) -This is because Node Streams are much faster than Web Streams in Node, and Web Streams do not support compression by default, leading to users accidentally missing the benefits of streaming. +Questo perché Node Streams sono molto più veloci di Web Streams in Node, e Web Streams non supportano la compressione per impostazione predefinita, portando gli utenti a perdere accidentalmente i benefici dello streaming. @@ -289,51 +296,51 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S ### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/} -We also published `eslint-plugin-react-hooks@latest` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules. +Abbiamo anche pubblicato `eslint-plugin-react-hooks@latest` con flat config per impostazione predefinita nel preset `recommended`, e opt-in per le nuove regole alimentate da React Compiler. -To continue using the legacy config, you can change to `recommended-legacy`: +Per continuare a usare la config legacy, puoi passare a `recommended-legacy`: ```diff - extends: ['plugin:react-hooks/recommended'] + extends: ['plugin:react-hooks/recommended-legacy'] ``` -For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended). +Per un elenco completo delle regole abilitate dal compiler, [consulta la documentazione del linter](/reference/eslint-plugin-react-hooks#recommended). -Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). +Consulta il [changelog di `eslint-plugin-react-hooks` per un elenco completo dei cambiamenti](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). --- -### Update the default `useId` prefix {/*update-the-default-useid-prefix*/} +### Aggiornamento del prefisso predefinito di `useId` {/*update-the-default-useid-prefix*/} -In 19.2, we're updating the default `useId` prefix from `:r:` (19.0.0) or `«r»` (19.1.0) to `_r_`. +In 19.2, aggiorniamo il prefisso predefinito di `useId` da `:r:` (19.0.0) o `«r»` (19.1.0) a `_r_`. -The original intent of using a special character that was not valid for CSS selectors was that it would be unlikely to collide with IDs written by users. However, to support View Transitions, we need to ensure that IDs generated by `useId` are valid for `view-transition-name` and XML 1.0 names. +L'intento originale di usare un carattere speciale non valido per i selettori CSS era che fosse improbabile collidere con ID scritti dagli utenti. Tuttavia, per supportare View Transitions, dobbiamo garantire che gli ID generati da `useId` siano validi per `view-transition-name` e nomi XML 1.0. --- ## Changelog {/*changelog*/} -Other notable changes -- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/react/react/pull/32461) -- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/react/react/pull/32774) +Altri cambiamenti notevoli +- `react-dom`: Consente l'uso di nonce su stili hoistable [#32461](https://github.com/react/react/pull/32461) +- `react-dom`: Avvisa per l'uso di un nodo di proprietà React come Container se ha anche contenuto testuale [#32774](https://github.com/react/react/pull/32774) -Notable bug fixes -- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/react/react/pull/33507) -- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/react/react/pull/32821) -- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/react/react/pull/34376) -- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/react/react/pull/33055) -- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/react/react/pull/32900) -- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/react/react/pull/34145) -- `react`: Improve component stacks in various places [#33629](https://github.com/react/react/pull/33629), [#33724](https://github.com/react/react/pull/33724), [#32735](https://github.com/react/react/pull/32735), [#33723](https://github.com/react/react/pull/33723) -- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/react/react/pull/33941) -- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/react/react/pull/34264) -- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/react/react/pull/33467) -- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/react/react/pull/34192) +Correzioni di bug notevoli +- `react`: Stringifica context come "SomeContext" invece di "SomeContext.Provider" [#33507](https://github.com/react/react/pull/33507) +- `react`: Corregge loop infinito useDeferredValue nell'evento popstate [#32821](https://github.com/react/react/pull/32821) +- `react`: Corregge un bug quando un valore iniziale veniva passato a useDeferredValue [#34376](https://github.com/react/react/pull/34376) +- `react`: Corregge un crash quando si inviano form con Client Actions [#33055](https://github.com/react/react/pull/33055) +- `react`: Nasconde/ripristina la visibilità del contenuto dei boundary suspense disidratati se risospendono [#32900](https://github.com/react/react/pull/32900) +- `react`: Evita stack overflow su alberi larghi durante Hot Reload [#34145](https://github.com/react/react/pull/34145) +- `react`: Migliora component stack in vari punti [#33629](https://github.com/react/react/pull/33629), [#33724](https://github.com/react/react/pull/33724), [#32735](https://github.com/react/react/pull/32735), [#33723](https://github.com/react/react/pull/33723) +- `react`: Corregge un bug con React.use dentro Component React.lazy-ed [#33941](https://github.com/react/react/pull/33941) +- `react-dom`: Smette di avvisare quando attributi ARIA 1.3 sono usati [#34264](https://github.com/react/react/pull/34264) +- `react-dom`: Corregge un bug con Suspense profondamente annidato dentro fallback Suspense [#33467](https://github.com/react/react/pull/33467) +- `react-dom`: Evita hang quando si sospende dopo abort durante la renderizzazione [#34192](https://github.com/react/react/pull/34192) -For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). +Per un elenco completo dei cambiamenti, consulta il [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). --- -_Thanks to [Ricky Hanlon](https://bsky.app/profile/ricky.fm) for [writing this post](https://www.youtube.com/shorts/T9X3YkgZRG0), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), and [Joe Savona](https://x.com/en_JS) for reviewing this post._ +_Grazie a [Ricky Hanlon](https://bsky.app/profile/ricky.fm) per [aver scritto questo post](https://www.youtube.com/shorts/T9X3YkgZRG0), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me) e [Joe Savona](https://x.com/en_JS) per la revisione di questo post._ diff --git a/src/content/blog/2025/10/07/introducing-the-react-foundation.md b/src/content/blog/2025/10/07/introducing-the-react-foundation.md index a9b922dbc..a56a0c1da 100644 --- a/src/content/blog/2025/10/07/introducing-the-react-foundation.md +++ b/src/content/blog/2025/10/07/introducing-the-react-foundation.md @@ -1,14 +1,21 @@ --- -title: "Introducing the React Foundation" +title: "Presentazione della React Foundation" author: Seth Webster, Matt Carroll, Joe Savona date: 2025/10/07 -description: Today, we're announcing our plans to create the React Foundation a new technical governance structure +description: Oggi annunciamo i nostri piani per creare la React Foundation, una nuova struttura di governance tecnica +translationStatus: ai-draft --- -October 7, 2025 by [Seth Webster](https://x.com/sethwebster), [Matt Carroll](https://x.com/mattcarrollcode), [Joe Savona](https://x.com/en_JS), [Sophie Alpert](https://x.com/sophiebits) +7 ottobre 2025 di [Seth Webster](https://x.com/sethwebster), [Matt Carroll](https://x.com/mattcarrollcode), [Joe Savona](https://x.com/en_JS) e [Sophie Alpert](https://x.com/sophiebits) --- + + +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/blog/2025/10/07/introducing-the-react-foundation.md). + + +
@@ -23,27 +30,27 @@ October 7, 2025 by [Seth Webster](https://x.com/sethwebster), [Matt Carroll](htt -Today, we're announcing our plans to create the React Foundation and a new technical governance structure. +Oggi annunciamo i nostri piani per creare la React Foundation e una nuova struttura di governance tecnica. --- -We open sourced React over a decade ago to help developers build great user experiences. From its earliest days, React has received substantial contributions from contributors outside of Meta. Over time, the number of contributors and the scope of their contributions has grown significantly. What started out as a tool developed for Meta has expanded into a project that spans multiple companies with regular contributions from across the ecosystem. React has outgrown the confines of any one company. +Abbiamo reso React open source oltre un decennio fa per aiutare gli sviluppatori a costruire ottime esperienze utente. Fin dai primi giorni, React ha ricevuto contributi sostanziali da contributor al di fuori di Meta. Nel tempo, il numero di contributor e l'ampiezza dei loro contributi è cresciuta in modo significativo. Quello che era nato come uno strumento sviluppato per Meta si è espanso in un progetto che coinvolge più aziende, con contributi regolari provenienti da tutto l'ecosistema. React ha superato i confini di qualsiasi singola azienda. -To better serve the React community, we are announcing our plans to move React and React Native from Meta to a new React Foundation. As a part of this change, we will also be implementing a new independent technical governance structure. We believe these changes will enable us to give React ecosystem projects more resources. +Per servire meglio la community React, annunciamo i nostri piani per spostare React e React Native da Meta a una nuova React Foundation. Come parte di questo cambiamento, implementeremo anche una nuova struttura di governance tecnica indipendente. Crediamo che questi cambiamenti ci permetteranno di offrire più risorse ai progetti dell'ecosistema React. -## The React Foundation {/*the-react-foundation*/} +## La React Foundation {/*the-react-foundation*/} -We will make the React Foundation the new home for React, React Native, and some supporting projects like JSX. The React Foundation’s mission will be to support the React community and ecosystem. Once implemented, the React Foundation will +Faremo della React Foundation la nuova sede di React, React Native e di alcuni progetti di supporto come JSX. La missione della React Foundation sarà supportare la community e l'ecosistema React. Una volta implementata, la React Foundation -* Maintain React’s infrastructure like GitHub, CI, and trademarks -* Organize React Conf -* Create initiatives to support the React ecosystem like financial support of ecosystem projects, issuing grants, and creating programs +* Manterrà l'infrastruttura di React come GitHub, CI e marchi registrati +* Organizzerà React Conf +* Creerà iniziative per supportare l'ecosistema React, come supporto finanziario a progetti dell'ecosistema, erogazione di grant e creazione di programmi -The React Foundation will be governed by a board of directors, with Seth Webster serving as the executive director. This board will direct funds and resources to support React’s development, community, and ecosystem. We believe that this is the best structure to ensure that the React Foundation is vendor-neutral and reflects the best interests of the community. +La React Foundation sarà governata da un consiglio di amministrazione, con Seth Webster come direttore esecutivo. Questo consiglio indirizzerà fondi e risorse per supportare lo sviluppo, la community e l'ecosistema di React. Crediamo che questa sia la struttura migliore per garantire che la React Foundation sia vendor-neutral e rifletta i migliori interessi della community. -The founding corporate members of the React Foundation will be Amazon, Callstack, Expo, Meta, Microsoft, Software Mansion, and Vercel. These companies have had a major impact on the React and React Native ecosystems and we are grateful for their support. We are excited to welcome even more members in the future. +I membri corporate fondatori della React Foundation saranno Amazon, Callstack, Expo, Meta, Microsoft, Software Mansion e Vercel. Queste aziende hanno avuto un impatto significativo sugli ecosistemi React e React Native e siamo grati per il loro supporto. Siamo entusiasti di accogliere altri membri in futuro.
@@ -56,12 +63,12 @@ The founding corporate members of the React Foundation will be Amazon, Callstack
-## React’s technical governance {/*reacts-technical-governance*/} +## Governance tecnica di React {/*reacts-technical-governance*/} -We believe that React's technical direction should be set by the people who contribute to and maintain React. As React moves to a foundation, it is important that no single company or organization is overrepresented. To achieve this, we plan to define a new technical governance structure for React that is independent from the React Foundation. +Crediamo che la direzione tecnica di React debba essere definita dalle persone che contribuiscono a React e lo mantengono. Mentre React passa a una foundation, è importante che nessuna singola azienda o organizzazione sia sovrarappresentata. Per raggiungere questo obiettivo, prevediamo di definire una nuova struttura di governance tecnica per React, indipendente dalla React Foundation. -As a part of creating React’s new technical governance structure we will reach out to the community for feedback. Once finalized, we will share details in a future post. +Come parte della creazione della nuova struttura di governance tecnica di React, ci rivolgeremo alla community per raccogliere feedback. Una volta finalizzata, condivideremo i dettagli in un post futuro. -## Thank you {/*thank-you*/} +## Grazie {/*thank-you*/} -React's incredible growth is thanks to the thousands of people, companies, and projects that have shaped React. The creation of the React Foundation is a testament to the strength and vibrancy of the React community. Together, the React Foundation and React’s new technical governance will ensure that React’s future is secure for years to come. +L'incredibile crescita di React è merito delle migliaia di persone, aziende e progetti che hanno plasmato React. La creazione della React Foundation è una testimonianza della forza e della vivacità della community React. Insieme, la React Foundation e la nuova governance tecnica di React garantiranno che il futuro di React sia al sicuro per gli anni a venire. diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index ee5ffa4fd..9f8b42381 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -2,43 +2,49 @@ title: "React Compiler v1.0" author: Lauren Tan, Joe Savona, and Mofei Zhang date: 2025/10/07 -description: We are releasing the compiler's first stable release today. - +description: Oggi rilasciamo la prima release stabile del compiler. +translationStatus: ai-draft --- -Oct 7, 2025 by [Lauren Tan](https://x.com/potetotes), [Joe Savona](https://x.com/en_JS), and [Mofei Zhang](https://x.com/zmofei). +7 ottobre 2025 di [Lauren Tan](https://x.com/potetotes), [Joe Savona](https://x.com/en_JS) e [Mofei Zhang](https://x.com/zmofei). --- + + +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/blog/2025/10/07/react-compiler-1.md). + + + -The React team is excited to share new updates: +Il team React è entusiasta di condividere nuovi aggiornamenti: -1. React Compiler 1.0 is available today. -2. Compiler-powered lint rules ship in `eslint-plugin-react-hooks`'s `recommended` and `recommended-latest` preset. -3. We've published an incremental adoption guide, and partnered with Expo, Vite, and Next.js so new apps can start with the compiler enabled. +1. React Compiler 1.0 è disponibile oggi. +2. Le regole lint alimentate dal compiler sono incluse nei preset `recommended` e `recommended-latest` di `eslint-plugin-react-hooks`. +3. Abbiamo pubblicato una guida all'adozione incrementale e collaborato con Expo, Vite e Next.js così che le nuove app possano partire con il compiler abilitato. --- -We are releasing the compiler's first stable release today. React Compiler works on both React and React Native, and automatically optimizes components and hooks without requiring rewrites. The compiler has been battle tested on major apps at Meta and is fully production-ready. +Oggi rilasciamo la prima release stabile del compiler. React Compiler funziona sia su React che su React Native e ottimizza automaticamente componenti e hooks senza richiedere riscritture. Il compiler è stato testato in battaglia su app importanti in Meta ed è completamente pronto per la produzione. -[React Compiler](/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler's [first beta](/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We're excited about the wins we've seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are excited to bring the compiler to more users in the React community. +[React Compiler](/learn/react-compiler) è uno strumento build-time che ottimizza la tua app React tramite memorizzazione automatica. Lo scorso anno abbiamo pubblicato la [prima beta](/blog/2024/10/21/react-compiler-beta-release) di React Compiler e abbiamo ricevuto ottimo feedback e contributi. Siamo entusiasti dei risultati che abbiamo visto da chi ha adottato il compiler (vedi i case study di [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) e [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) e siamo entusiasti di portare il compiler a più utenti nella community React. -This release is the culmination of a huge and complex engineering effort spanning almost a decade. The React team's first exploration into compilers started with [Prepack](https://github.com/facebookarchive/prepack) in 2017. While this project was eventually shut down, there were many learnings that informed the team on the design of Hooks, which were designed with a future compiler in mind. In 2021, [Xuan Huang](https://x.com/Huxpro) demoed the [first iteration](https://www.youtube.com/watch?v=lGEMwh32soc) of a new take on React Compiler. +Questa release è il culmine di un enorme e complesso sforzo ingegneristico che abbraccia quasi un decennio. La prima esplorazione del team React sui compiler è iniziata con [Prepack](https://github.com/facebookarchive/prepack) nel 2017. Sebbene questo progetto sia stato poi chiuso, ci sono state molte lezioni che hanno informato il team sulla progettazione degli Hooks, pensati fin dall'inizio con un compiler futuro in mente. Nel 2021, [Xuan Huang](https://x.com/Huxpro) ha presentato in demo la [prima iterazione](https://www.youtube.com/watch?v=lGEMwh32soc) di una nuova versione di React Compiler. -Although this first version of the new React Compiler was eventually rewritten, the first prototype gave us increased confidence that this was a tractable problem, and the learnings that an alternative compiler architecture could precisely give us the memoization characteristics we wanted. [Joe Savona](https://x.com/en_JS), [Sathya Gunasekaran](https://x.com/_gsathya), [Mofei Zhang](https://x.com/zmofei), and [Lauren Tan](https://x.com/potetotes) worked through our first rewrite, moving the compiler's architecture into a Control Flow Graph (CFG) based High-Level Intermediate Representation (HIR). This paved the way for much more precise analysis and even type inference within React Compiler. Since then, many significant portions of the compiler have been rewritten, with each rewrite informed by our learnings from the previous attempt. And we have received significant help and contributions from many members of the [React team](/community/team) along the way. +Sebbene questa prima versione del nuovo React Compiler sia stata poi riscritta, il primo prototipo ci ha dato maggiore fiducia che fosse un problema trattabile, e le lezioni su un'architettura alternativa del compiler potevano darci con precisione le caratteristiche di memorizzazione che volevamo. [Joe Savona](https://x.com/en_JS), [Sathya Gunasekaran](https://x.com/_gsathya), [Mofei Zhang](https://x.com/zmofei) e [Lauren Tan](https://x.com/potetotes) hanno lavorato alla nostra prima riscrittura, spostando l'architettura del compiler in una High-Level Intermediate Representation (HIR) basata su Control Flow Graph (CFG). Questo ha spianato la strada a un'analisi molto più precisa e persino all'inferenza dei tipi all'interno di React Compiler. Da allora, porzioni significative del compiler sono state riscritte, ogni riscrittura informata dalle lezioni del tentativo precedente. E abbiamo ricevuto aiuto e contributi significativi da molti membri del [team React](/community/team) lungo il percorso. -This stable release is our first of many. The compiler will continue to evolve and improve, and we expect to see it become a new foundation and era for the next decade and more of React. +Questa release stabile è la prima di molte. Il compiler continuerà a evolversi e migliorare, e ci aspettiamo che diventi una nuova fondazione e un'era per il prossimo decennio e oltre di React. -You can jump straight to the [quickstart](/learn/react-compiler), or read on for the highlights from React Conf 2025. +Puoi passare direttamente al [quickstart](/learn/react-compiler), o continuare a leggere i momenti salienti di React Conf 2025. -#### How does React Compiler work? {/*how-does-react-compiler-work*/} +#### Come funziona React Compiler? {/*how-does-react-compiler-work*/} -React Compiler is an optimizing compiler that optimizes components and hooks through automatic memoization. While it is implemented as a Babel plugin currently, the compiler is largely decoupled from Babel and lowers the Abstract Syntax Tree (AST) provided by Babel into its own novel HIR, and through multiple compiler passes, carefully understands data-flow and mutability of your React code. This allows the compiler to granularly memoize values used in rendering, including the ability to memoize conditionally, which is not possible through manual memoization. +React Compiler è un compiler ottimizzante che ottimizza componenti e hooks tramite memorizzazione automatica. Sebbene attualmente sia implementato come plugin Babel, il compiler è in gran parte disaccoppiato da Babel e abbassa l'Abstract Syntax Tree (AST) fornito da Babel nella sua HIR originale; attraverso più pass del compiler, comprende con attenzione il data-flow e la mutabilità del tuo codice React. Questo consente al compiler di memorizzare granularmente i valori usati nel rendering, inclusa la capacità di memorizzare condizionalmente, cosa non possibile con la memorizzazione manuale. ```js {8} import { use } from 'react'; @@ -56,16 +62,16 @@ export default function ThemeProvider(props) { ); } ``` -_See this example in the [React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCBAvgQGYwQYEDkMCAhnHowNwA6AdvwQAPHPgIATBNVZQANoWpQ+HNBD4EAKgAsEGBAAU6ANzSSYACix0sYAJRF+BAmmoFzAQisQbAOjha0WXEWPntgRycCFjxYdT45WV51Sgi4NTBCPB09AgBeAj0YAHMEbV0ES2swHyzygBoSMnMyvQBhNTxhPFtbJKdo2LcIpwAeFoR2vk6hQiNWWSgEXOBavQoAPmHI4C9ff0DghD4KLZGAenHJ6bxN5N7+ChA6kDS+ajQilHRsXEyATyw5GI+gWRTQfAA8lg8Ko+GBKDQ6AxGAAjVgohCyAC0WFB4KxLHYeCxaWwgQQMDO4jQGW4-H45nCyTOZ1JWECrBhagAshBJMgCDwQPNZEKHgQwJyae8EPCQVAwZDobC7FwnuAtBAAO4ASSmFL48zAKGksjIFCAA)_ +_Vedi questo esempio nel [React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCBAvgQGYwQYEDkMCAhnHowNwA6AdvwQAPHPgIATBNVZQANoWpQ+HNBD4EAKgAsEGBAAU6ANzSSYACix0sYAJRF+BAmmoFzAQisQbAOjha0WXEWPntgRycCFjxYdT45WV51Sgi4NTBCPB09AgBeAj0YAHMEbV0ES2swHyzygBoSMnMyvQBhNTxhPFtbJKdo2LcIpwAeFoR2vk6hQiNWWSgEXOBavQoAPmHI4C9ff0DghD4KLZGAenHJ6bxN5N7+ChA6kDS+ajQilHRsXEyATyw5GI+gWRTQfAA8lg8Ko+GBKDQ6AxGAAjVgohCyAC0WFB4KxLHYeCxaWwgQQMDO4jQGW4-H45nCyTOZ1JWECrBhagAshBJMgCDwQPNZEKHgQwJyae8EPCQVAwZDobC7FwnuAtBAAO4ASSmFL48zAKGksjIFCAA)_ -In addition to automatic memoization, React Compiler also has validation passes that run on your React code. These passes encode the [Rules of React](/reference/rules), and uses the compiler's understanding of data-flow and mutability to provide diagnostics where the Rules of React are broken. These diagnostics often expose latent bugs hiding in React code, and are primarily surfaced through `eslint-plugin-react-hooks`. +Oltre alla memorizzazione automatica, React Compiler ha anche pass di validazione che girano sul tuo codice React. Questi pass codificano le [Rules of React](/reference/rules) e usano la comprensione del compiler di data-flow e mutabilità per fornire diagnostiche dove le Rules of React sono violate. Queste diagnostiche spesso espongono bug latenti nel codice React e vengono principalmente mostrate tramite `eslint-plugin-react-hooks`. -To learn more about how the compiler optimizes your code, visit the [Playground](https://playground.react.dev). +Per saperne di più su come il compiler ottimizza il tuo codice, visita il [Playground](https://playground.react.dev). -## Use React Compiler Today {/*use-react-compiler-today*/} -To install the compiler: +## Usa React Compiler oggi {/*use-react-compiler-today*/} +Per installare il compiler: npm @@ -82,22 +88,22 @@ yarn yarn add --dev --exact babel-plugin-react-compiler@latest -As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code. +Come parte della release stabile, abbiamo reso React Compiler più facile da aggiungere ai progetti e aggiunto ottimizzazioni a come il compiler genera la memorizzazione. React Compiler ora supporta optional chains e indici di array come dipendenze. Questi miglioramenti si traducono in meno ri-renderizzazioni e UI più reattive, lasciandoti scrivere codice dichiarativo idiomatico. -You can find more details on using the Compiler in [our docs](/learn/react-compiler). +Puoi trovare maggiori dettagli sull'uso del Compiler nella [nostra documentazione](/learn/react-compiler). -## What we're seeing in production {/*react-compiler-at-meta*/} -[The compiler has already shipped in apps like Meta Quest Store](https://youtu.be/lyEKhv8-3n0?t=3002). We've seen initial loads and cross-page navigations improve by up to 12%, while certain interactions are more than 2.5× faster. Memory usage stays neutral even with these wins. Although your mileage may vary, we recommend experimenting with the compiler in your app to see similar performance gains. +## Cosa vediamo in produzione {/*react-compiler-at-meta*/} +[Il compiler è già stato rilasciato in app come Meta Quest Store](https://youtu.be/lyEKhv8-3n0?t=3002). Abbiamo visto carichi iniziali e navigazioni tra pagine migliorare fino al 12%, mentre alcune interazioni sono più di 2,5× più veloci. L'uso della memoria resta neutro nonostante questi guadagni. Sebbene i risultati possano variare, raccomandiamo di sperimentare con il compiler nella tua app per vedere guadagni di performance simili. -## Backwards Compatibility {/*backwards-compatibility*/} -As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](/reference/react-compiler/target#targeting-react-17-or-18). +## Compatibilità retroattiva {/*backwards-compatibility*/} +Come indicato nell'annuncio Beta, React Compiler è compatibile con React 17 e versioni successive. Se non sei ancora su React 19, puoi usare React Compiler specificando un target minimo nella config del compiler e aggiungendo `react-compiler-runtime` come dipendenza. Puoi trovare la documentazione [qui](/reference/react-compiler/target#targeting-react-17-or-18). -## Enforce the Rules of React with compiler-powered linting {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -React Compiler includes an ESLint rule that helps identify code that breaks the [Rules of React](/reference/rules). The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today. +## Applica le Regole di React con lint alimentato dal compiler {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} +React Compiler include una regola ESLint che aiuta a identificare codice che viola le [Rules of React](/reference/rules). Il linter non richiede che il compiler sia installato, quindi non c'è rischio nell'aggiornare eslint-plugin-react-hooks. Raccomandiamo a tutti di aggiornare oggi. -If you have already installed `eslint-plugin-react-compiler`, you can now remove it and use `eslint-plugin-react-hooks@latest`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +Se hai già installato `eslint-plugin-react-compiler`, ora puoi rimuoverlo e usare `eslint-plugin-react-hooks@latest`. Grazie a [@michaelfaith](https://bsky.app/profile/michael.faith) per il contributo a questo miglioramento! -To install: +Per installare: npm @@ -132,31 +138,31 @@ export default defineConfig([ } ``` -To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf: +Per abilitare le regole React Compiler, raccomandiamo di usare il preset `recommended`. Puoi anche consultare il [README](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/README.md) per ulteriori istruzioni. Ecco alcuni esempi che abbiamo presentato a React Conf: -- Catching `setState` patterns that cause render loops with [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render). -- Flagging expensive work inside effects via [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect). -- Preventing unsafe ref access during render with [`refs`](/reference/eslint-plugin-react-hooks/lints/refs). +- Intercettare pattern `setState` che causano loop di renderizzazione con [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render). +- Segnalare lavoro costoso dentro gli Effetti tramite [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect). +- Impedire accessi ref non sicuri durante la renderizzazione con [`refs`](/reference/eslint-plugin-react-hooks/lints/refs). -## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written — and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return. +## Cosa fare con useMemo, useCallback e React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +Per impostazione predefinita, React Compiler memorizzerà il tuo codice in base alla sua analisi ed euristiche. Nella maggior parte dei casi, questa memorizzazione sarà precisa quanto, o più di, quella che avresti scritto — e come indicato sopra, il compiler può memorizzare anche in casi in cui `useMemo`/`useCallback` non possono essere usati, come dopo un early return. -However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change. +Tuttavia, in alcuni casi gli sviluppatori possono aver bisogno di maggiore controllo sulla memorizzazione. Gli hooks `useMemo` e `useCallback` possono continuare a essere usati con React Compiler come escape hatch per controllare quali valori vengono memorizzati. Un caso d'uso comune è quando un valore memorizzato è usato come dipendenza di un Effetto, per garantire che un Effetto non si attivi ripetutamente anche quando le sue dipendenze non cambiano in modo significativo. -For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control. +Per codice nuovo, raccomandiamo di fare affidamento sul compiler per la memorizzazione e usare `useMemo`/`useCallback` dove serve per un controllo preciso. -For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization. +Per codice esistente, raccomandiamo di lasciare la memorizzazione esistente al suo posto (rimuoverla può cambiare l'output della compilazione) o testare con attenzione prima di rimuovere la memorizzazione. -## New apps should use React Compiler {/*new-apps-should-use-react-compiler*/} -We have partnered with the Expo, Vite, and Next.js teams to add the compiler to the new app experience. +## Le nuove app dovrebbero usare React Compiler {/*new-apps-should-use-react-compiler*/} +Abbiamo collaborato con i team di Expo, Vite e Next.js per aggiungere il compiler all'esperienza delle nuove app. -[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start. +[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) e versioni successive hanno il compiler abilitato per impostazione predefinita, così le nuove app potranno sfruttare automaticamente il compiler fin dall'inizio. npx create-expo-app@latest -[Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`. +Gli utenti [Vite](https://vite.dev/guide/) e [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) possono scegliere i template con compiler abilitato in `create-vite` e `create-next-app`. npm create vite@latest @@ -168,27 +174,27 @@ npm create vite@latest npx create-next-app@latest -## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/} -If you're maintaining an existing application, you can roll out the compiler at your own pace. We published a step-by-step [incremental adoption guide](/learn/react-compiler/incremental-adoption) that covers gating strategies, compatibility checks, and rollout tooling so you can enable the compiler with confidence. +## Adotta React Compiler in modo incrementale {/*adopt-react-compiler-incrementally*/} +Se mantieni un'applicazione esistente, puoi distribuire il compiler al tuo ritmo. Abbiamo pubblicato una [guida all'adozione incrementale](/learn/react-compiler/incremental-adoption) passo passo che copre strategie di gating, controlli di compatibilità e strumenti di rollout così puoi abilitare il compiler con fiducia. -## swc support (experimental) {/*swc-support-experimental*/} -React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild. +## Supporto swc (sperimentale) {/*swc-support-experimental*/} +React Compiler può essere installato su [diversi build tool](/learn/react-compiler#installation) come Babel, Vite e Rsbuild. -In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler). +Oltre a questi strumenti, abbiamo collaborato con Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) del team [swc](https://swc.rs/) per aggiungere ulteriore supporto a React Compiler come plugin swc. Sebbene questo lavoro non sia completo, le performance di build di Next.js dovrebbero ora essere considerevolmente più veloci quando [React Compiler è abilitato nella tua app Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler). -We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance. +Raccomandiamo di usare Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) o superiore per ottenere le migliori performance di build. -Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](/learn/react-compiler/installation#vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. +Gli utenti Vite possono continuare a usare [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) per abilitare il compiler, aggiungendolo come [plugin Babel](/learn/react-compiler/installation#vite). Stiamo anche lavorando con il team [oxc](https://oxc.rs/) per [aggiungere supporto al compiler](https://github.com/oxc-project/oxc/issues/10048). Una volta che [rolldown](https://github.com/rolldown/rolldown) sarà rilasciato ufficialmente e supportato in Vite e il supporto oxc per React Compiler sarà aggiunto, aggiorneremo la documentazione con informazioni su come migrare. -## Upgrading React Compiler {/*upgrading-react-compiler*/} -React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. +## Aggiornare React Compiler {/*upgrading-react-compiler*/} +React Compiler funziona al meglio quando la auto-memorizzazione applicata è strettamente per performance. Versioni future del compiler potrebbero cambiare come viene applicata la memorizzazione, ad esempio potrebbe diventare più granulare e precisa. -However, because product code may sometimes break the [rules of React](/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a `useEffect` somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that `useEffect`. While we encourage [useEffect only for synchronization](/learn/synchronizing-with-effects), your codebase may have `useEffect`s that cover other use cases, such as effects that needs to only run in response to specific values changing. +Tuttavia, poiché il codice di prodotto a volte può violare le [rules of React](/reference/rules) in modi non sempre staticamente rilevabili in JavaScript, cambiare la memorizzazione può occasionalmente avere risultati inattesi. Ad esempio, un valore precedentemente memorizzato potrebbe essere usato come dipendenza per un `useEffect` da qualche parte nell'albero dei componenti. Cambiare come o se questo valore viene memorizzato può causare un over o under-firing di quel `useEffect`. Sebbene incoraggiamo [useEffect solo per la sincronizzazione](/learn/synchronizing-with-effects), la tua codebase potrebbe avere `useEffect` che coprono altri casi d'uso, come Effetti che devono eseguirsi solo in risposta a cambiamenti di valori specifici. -In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. +In altre parole, cambiare la memorizzazione può in rari casi causare comportamenti inattesi. Per questo motivo, raccomandiamo di seguire le Rules of React e di impiegare test end-to-end continui della tua app così puoi aggiornare il compiler con fiducia e identificare eventuali violazioni delle rules of React che potrebbero causare problemi. -If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `1.0.0`) rather than a SemVer range (eg `^1.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. +Se non hai una buona copertura di test, raccomandiamo di fissare il compiler a una versione esatta (es. `1.0.0`) piuttosto che a un range SemVer (es. `^1.0.0`). Puoi farlo passando i flag `--save-exact` (npm/pnpm) o `--exact` (yarn) quando aggiorni il compiler. Dovresti poi fare qualsiasi upgrade del compiler manualmente, verificando che la tua app funzioni ancora come previsto. --- -Thanks to [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev), and [Dan Abramov](https://bsky.app/profile/danabra.mov) for reviewing and editing this post. +Grazie a [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) e [Dan Abramov](https://bsky.app/profile/danabra.mov) per la revisione e l'editing di questo post. diff --git a/src/content/blog/2025/10/16/react-conf-2025-recap.md b/src/content/blog/2025/10/16/react-conf-2025-recap.md index 8476b02aa..3ae0f2672 100644 --- a/src/content/blog/2025/10/16/react-conf-2025-recap.md +++ b/src/content/blog/2025/10/16/react-conf-2025-recap.md @@ -1,133 +1,140 @@ --- -title: "React Conf 2025 Recap" +title: "Resoconto di React Conf 2025" author: Matt Carroll and Ricky Hanlon date: 2025/10/16 -description: Last week we hosted React Conf 2025, in this post, we summarize the talks and announcements from the event... +description: La scorsa settimana abbiamo ospitato React Conf 2025; in questo post riassumiamo i talk e gli annunci dell'evento... +translationStatus: ai-draft --- -Oct 16, 2025 by [Matt Carroll](https://x.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm) +16 ottobre 2025 di [Matt Carroll](https://x.com/mattcarrollcode) e [Ricky Hanlon](https://bsky.app/profile/ricky.fm) --- + + +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/blog/2025/10/16/react-conf-2025-recap.md). + + + -Last week we hosted React Conf 2025 where we announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) and showcased new features coming to React and React Native. +La scorsa settimana abbiamo ospitato React Conf 2025, dove abbiamo annunciato la [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) e presentato le nuove funzionalità in arrivo per React e React Native. --- -React Conf 2025 was held on October 7-8, 2025, in Henderson, Nevada. +React Conf 2025 si è tenuta il 7-8 ottobre 2025 a Henderson, Nevada. -The entire [day 1](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s) and [day 2](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s) streams are available online, and you can view photos from the event [here](https://conf.react.dev/photos). +Gli stream completi del [giorno 1](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s) e del [giorno 2](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s) sono disponibili online, e puoi vedere le foto dell'evento [qui](https://conf.react.dev/photos). -In this post, we'll summarize the talks and announcements from the event. +In questo post riassumiamo i talk e gli annunci dell'evento. -## Day 1 Keynote {/*day-1-keynote*/} +## Keynote del giorno 1 {/*day-1-keynote*/} -_Watch the full day 1 stream [here.](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s)_ +_Guarda lo stream completo del giorno 1 [qui.](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s)_ -In the day 1 keynote, Joe Savona shared the updates from the team and community since the last React Conf and highlights from React 19.0 and 19.1. +Nel keynote del giorno 1, Joe Savona ha condiviso gli aggiornamenti del team e della community dall'ultima React Conf e i momenti salienti di React 19.0 e 19.1. -Mofei Zhang highlighted the new features in React 19.2 including: -* [``](https://react.dev/reference/react/Activity) — a new component to manage visibility. -* [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) to fire events from Effects. -* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) — a new profiling tool in DevTools. -* [Partial Pre-Rendering](https://react.dev/blog/2025/10/01/react-19-2#partial-pre-rendering) to pre-render part of an app ahead of time, and resume rendering it later. +Mofei Zhang ha evidenziato le nuove funzionalità in React 19.2, tra cui: +* [``](https://react.dev/reference/react/Activity) — un nuovo componente per gestire la visibilità. +* [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) per emettere eventi dagli Effetti. +* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) — un nuovo strumento di profiling in DevTools. +* [Partial Pre-rendering](https://react.dev/blog/2025/10/01/react-19-2#partial-pre-rendering) per pre-renderizzare parte di un'app in anticipo e riprendere la renderizzazione in seguito. -Jack Pope announced new features in Canary including: +Jack Pope ha annunciato nuove funzionalità in Canary, tra cui: -* [``](https://react.dev/reference/react/ViewTransition) — a new component to animate page transitions. -* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance) — a new way to interact with the DOM nodes wrapped by a Fragment. +* [``](https://react.dev/reference/react/ViewTransition) — un nuovo componente per animare le transizioni di pagina. +* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance) — un nuovo modo per interagire con i nodi DOM avvolti da un Fragment. -Lauren Tan announced [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1) and recommended all apps use React Compiler for benefits like: -* [Automatic memoization](/learn/react-compiler/introduction#what-does-react-compiler-do) that understands React code. -* [New lint rules](/learn/react-compiler/installation#eslint-integration) powered by React Compiler to teach best practices. -* [Default support](/learn/react-compiler/installation#basic-setup) for new apps in Vite, Next.js, and Expo. -* [Migration guides](/learn/react-compiler/incremental-adoption) for existing apps migrating to React Compiler. +Lauren Tan ha annunciato [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1) e ha raccomandato a tutte le app di usare React Compiler per benefici come: +* [Memorizzazione automatica](/learn/react-compiler/introduction#what-does-react-compiler-do) che comprende il codice React. +* [Nuove regole lint](/learn/react-compiler/installation#eslint-integration) alimentate da React Compiler per insegnare le best practice. +* [Supporto predefinito](/learn/react-compiler/installation#basic-setup) per le nuove app in Vite, Next.js ed Expo. +* [Guide di migrazione](/learn/react-compiler/incremental-adoption) per le app esistenti che adottano React Compiler. -Finally, Seth Webster announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) to steward React's open source development and community. +Infine, Seth Webster ha annunciato la [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) per guidare lo sviluppo open source e la community di React. -Watch day 1 here: +Guarda il giorno 1 qui: -## Day 2 Keynote {/*day-2-keynote*/} +## Keynote del giorno 2 {/*day-2-keynote*/} -_Watch the full day 2 stream [here.](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s)_ +_Guarda lo stream completo del giorno 2 [qui.](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s)_ -Jorge Cohen and Nicola Corti kicked off day 2 highlighting React Native’s incredible growth with 4M weekly downloads (100% growth YoY), and some notable app migrations from Shopify, Zalando, and HelloFresh, award-winning apps like RISE, RUNNA, and Partyful, and AI apps from Mistral, Replit, and v0. +Jorge Cohen e Nicola Corti hanno aperto il giorno 2 evidenziando l'incredibile crescita di React Native con 4M di download settimanali (100% di crescita YoY), alcune migrazioni notevoli di app da Shopify, Zalando e HelloFresh, app premiate come RISE, RUNNA e Partyful, e app AI da Mistral, Replit e v0. -Riccardo Cipolleschi shared two major announcements for React Native: -- [React Native 0.82 will be New Architecture only](https://reactnative.dev/blog/2025/10/08/react-native-0.82#new-architecture-only) -- [Experimental Hermes V1 support](https://reactnative.dev/blog/2025/10/08/react-native-0.82#experimental-hermes-v1) +Riccardo Cipolleschi ha condiviso due annunci importanti per React Native: +- [React Native 0.82 sarà solo New Architecture](https://reactnative.dev/blog/2025/10/08/react-native-0.82#new-architecture-only) +- [Supporto sperimentale di Hermes V1](https://reactnative.dev/blog/2025/10/08/react-native-0.82#experimental-hermes-v1) -Ruben Norte and Alex Hunt finished out the keynote by announcing: -- [New web-aligned DOM APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#dom-node-apis) for improved compatibility with React on the web. -- [New Performance APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#web-performance-apis-canary) with a new network panel and desktop app. +Ruben Norte e Alex Hunt hanno concluso il keynote annunciando: +- [Nuove API DOM allineate al web](https://reactnative.dev/blog/2025/10/08/react-native-0.82#dom-node-apis) per una migliore compatibilità con React sul web. +- [Nuove Performance API](https://reactnative.dev/blog/2025/10/08/react-native-0.82#web-performance-apis-canary) con un nuovo pannello di rete e un'app desktop. -Watch day 2 here: +Guarda il giorno 2 qui: -## React team talks {/*react-team-talks*/} +## Talk del team React {/*react-team-talks*/} -Throughout the conference, there were talks from the React team including: -* [Async React Part I](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=10907s) and [Part II](https://www.youtube.com/watch?v=p9OcztRyDl0&t=29073s) [(Ricky Hanlon)](https://x.com/rickhanlonii) showed what's possible using the last 10 years of innovation. -* [Exploring React Performance](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=20274s) [(Joe Savona)](https://x.com/en_js) showed the results of our React performance research. -* [Reimagining Lists in React Native](https://www.youtube.com/watch?v=p9OcztRyDl0&t=10382s) [(Luna Wei)](https://x.com/lunaleaps) introduced Virtual View, a new primitive for lists that manages visibility with mode-based rendering (hidden/pre-render/visible). -* [Profiling with React Performance tracks](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=8276s) [(Ruslan Lesiutin)](https://x.com/ruslanlesiutin) showed how to use the new React Performance Tracks to debug performance issues and build great apps. -* [React Strict DOM](https://www.youtube.com/watch?v=p9OcztRyDl0&t=9026s) [(Nicolas Gallagher)](https://nicolasgallagher.com/) talked about Meta's approach to using web code on native. -* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev) — Chance worked with the React team to showcase how to use `` and `` to build fast, native-feeling animations. -* [In case you missed the memo](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=9525s) [(Cody Olsen)](https://bsky.app/profile/codey.bsky.social) - Cody worked with the React team to adopt the Compiler at Sanity Studio, and shared how it went. -## React framework talks {/*react-framework-talks*/} +Durante la conferenza ci sono stati talk del team React, tra cui: +* [Async React Part I](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=10907s) e [Part II](https://www.youtube.com/watch?v=p9OcztRyDl0&t=29073s) [(Ricky Hanlon)](https://x.com/rickhanlonii) ha mostrato cosa è possibile con gli ultimi 10 anni di innovazione. +* [Exploring React Performance](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=20274s) [(Joe Savona)](https://x.com/en_js) ha mostrato i risultati della nostra ricerca sulle performance di React. +* [Reimagining Lists in React Native](https://www.youtube.com/watch?v=p9OcztRyDl0&t=10382s) [(Luna Wei)](https://x.com/lunaleaps) ha presentato Virtual View, una nuova primitiva per le liste che gestisce la visibilità con renderizzazione basata su modalità (hidden/pre-render/visible). +* [Profiling with React Performance tracks](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=8276s) [(Ruslan Lesiutin)](https://x.com/ruslanlesiutin) ha mostrato come usare le nuove React Performance Tracks per debuggare problemi di performance e costruire ottime app. +* [React Strict DOM](https://www.youtube.com/watch?v=p9OcztRyDl0&t=9026s) [(Nicolas Gallagher)](https://nicolasgallagher.com/) ha parlato dell'approccio di Meta all'uso di codice web su native. +* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev) — Chance ha lavorato con il team React per mostrare come usare `` e `` per costruire animazioni veloci dal feeling nativo. +* [In case you missed the memo](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=9525s) [(Cody Olsen)](https://bsky.app/profile/codey.bsky.social) — Cody ha lavorato con il team React per adottare il Compiler in Sanity Studio e ha condiviso com'è andata. +## Talk sui framework React {/*react-framework-talks*/} -The second half of day 2 had a series of talks from React Framework teams including: +La seconda metà del giorno 2 ha avuto una serie di talk dai team dei framework React, tra cui: -* [React Native, Amplified](https://www.youtube.com/watch?v=p9OcztRyDl0&t=5737s) by [Giovanni Laquidara](https://x.com/giolaq) and [Eric Fahsl](https://x.com/efahsl). -* [React Everywhere: Bringing React Into Native Apps](https://www.youtube.com/watch?v=p9OcztRyDl0&t=18213s) by [Mike Grabowski](https://x.com/grabbou). -* [How Parcel Bundles React Server Components](https://www.youtube.com/watch?v=p9OcztRyDl0&t=19538s) by [Devon Govett](https://x.com/devonovett). -* [Designing Page Transitions](https://www.youtube.com/watch?v=p9OcztRyDl0&t=20640s) by [Delba de Oliveira](https://x.com/delba_oliveira). -* [Build Fast, Deploy Faster — Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) by [Evan Bacon](https://x.com/baconbrix). -* [The React Router's take on RSC](https://www.youtube.com/watch?v=p9OcztRyDl0&t=22367s) by [Kent C. Dodds](https://x.com/kentcdodds). -* [RedwoodSDK: Web Standards Meet Full-Stack React](https://www.youtube.com/watch?v=p9OcztRyDl0&t=24992s) by [Peter Pistorius](https://x.com/appfactory) and [Aurora Scharff](https://x.com/aurorascharff). -* [TanStack Start](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26065s) by [Tanner Linsley](https://x.com/tannerlinsley). +* [React Native, Amplified](https://www.youtube.com/watch?v=p9OcztRyDl0&t=5737s) di [Giovanni Laquidara](https://x.com/giolaq) e [Eric Fahsl](https://x.com/efahsl). +* [React Everywhere: Bringing React Into Native Apps](https://www.youtube.com/watch?v=p9OcztRyDl0&t=18213s) di [Mike Grabowski](https://x.com/grabbou). +* [How Parcel Bundles React Server Components](https://www.youtube.com/watch?v=p9OcztRyDl0&t=19538s) di [Devon Govett](https://x.com/devonovett). +* [Designing Page Transitions](https://www.youtube.com/watch?v=p9OcztRyDl0&t=20640s) di [Delba de Oliveira](https://x.com/delba_oliveira). +* [Build Fast, Deploy Faster — Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) di [Evan Bacon](https://x.com/baconbrix). +* [The React Router's take on RSC](https://www.youtube.com/watch?v=p9OcztRyDl0&t=22367s) di [Kent C. Dodds](https://x.com/kentcdodds). +* [RedwoodSDK: Web Standards Meet Full-Stack React](https://www.youtube.com/watch?v=p9OcztRyDl0&t=24992s) di [Peter Pistorius](https://x.com/appfactory) e [Aurora Scharff](https://x.com/aurorascharff). +* [TanStack Start](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26065s) di [Tanner Linsley](https://x.com/tannerlinsley). ## Q&A {/*q-and-a*/} -There were three Q&A panels during the conference: +Durante la conferenza ci sono stati tre panel Q&A: -* [React Team at Meta Q&A](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=26304s) hosted by [Shruti Kapoor](https://x.com/shrutikapoor08) -* [React Frameworks Q&A](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26812s) hosted by [Jack Herrington](https://x.com/jherr) -* [React and AI Panel](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=18741s) hosted by [Lee Robinson](https://x.com/leerob) +* [React Team at Meta Q&A](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=26304s) condotto da [Shruti Kapoor](https://x.com/shrutikapoor08) +* [React Frameworks Q&A](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26812s) condotto da [Jack Herrington](https://x.com/jherr) +* [React and AI Panel](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=18741s) condotto da [Lee Robinson](https://x.com/leerob) -## And more... {/*and-more*/} +## E altro... {/*and-more*/} -We also heard talks from the community including: -* [Building an MCP Server](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24204s) by [James Swinton](https://x.com/JamesSwintonDev) ([AG Grid](https://www.ag-grid.com/?utm_source=react-conf&utm_medium=react-conf-homepage&utm_campaign=react-conf-sponsorship-2025)) -* [Modern Emails using React](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=25521s) by [Zeno Rocha](https://x.com/zenorocha) ([Resend](https://resend.com/)) -* [Why React Native Apps Make All the Money](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24917s) by [Perttu Lähteenlahti](https://x.com/plahteenlahti) ([RevenueCat](https://www.revenuecat.com/)) -* [The invisible craft of great UX](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=23400s) by [Michał Dudak](https://x.com/michaldudak) ([MUI](https://mui.com/)) +Abbiamo anche ascoltato talk dalla community, tra cui: +* [Building an MCP Server](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24204s) di [James Swinton](https://x.com/JamesSwintonDev) ([AG Grid](https://www.ag-grid.com/?utm_source=react-conf&utm_medium=react-conf-homepage&utm_campaign=react-conf-sponsorship-2025)) +* [Modern Emails using React](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=25521s) di [Zeno Rocha](https://x.com/zenorocha) ([Resend](https://resend.com/)) +* [Why React Native Apps Make All the Money](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24917s) di [Perttu Lähteenlahti](https://x.com/plahteenlahti) ([RevenueCat](https://www.revenuecat.com/)) +* [The invisible craft of great UX](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=23400s) di [Michał Dudak](https://x.com/michaldudak) ([MUI](https://mui.com/)) -## Thanks {/*thanks*/} +## Grazie {/*thanks*/} -Thank you to all the staff, speakers, and participants, who made React Conf 2025 possible. There are too many to list, but we want to thank a few in particular. +Grazie a tutto lo staff, ai relatori e ai partecipanti che hanno reso possibile React Conf 2025. Sono troppi per elencarli tutti, ma vogliamo ringraziare in particolare alcuni. -Thank you to [Matt Carroll](https://x.com/mattcarrollcode) for planning the entire event and building the conference website. +Grazie a [Matt Carroll](https://x.com/mattcarrollcode) per aver pianificato l'intero evento e costruito il sito della conferenza. -Thank you to [Michael Chan](https://x.com/chantastic) for MCing React Conf with incredible dedication and energy, delivering thoughtful speaker intros, fun jokes, and genuine enthusiasm throughout the event. Thank you to [Jorge Cohen](https://x.com/JorgeWritesCode) for hosting the livestream, interviewing each speaker, and bringing the in-person React Conf experience online. +Grazie a [Michael Chan](https://x.com/chantastic) per aver condotto React Conf con dedizione ed energia incredibili, presentando introduzioni attente ai relatori, battute divertenti e genuino entusiasmo per tutta la durata dell'evento. Grazie a [Jorge Cohen](https://x.com/JorgeWritesCode) per aver ospitato lo streaming live, intervistato ogni relatore e portato online l'esperienza di React Conf in presenza. -Thank you to [Mateusz Kornacki](https://x.com/mat_kornacki), [Mike Grabowski](https://x.com/grabbou), [Kris Lis](https://www.linkedin.com/in/krzysztoflisakakris/) and the team at [Callstack](https://www.callstack.com/) for co-organizing React Conf and providing design, engineering, and marketing support. Thank you to the [ZeroSlope team](https://zeroslopeevents.com/contact-us/): Sunny Leggett, Tracey Harrison, Tara Larish, Whitney Pogue, and Brianne Smythia for helping to organize the event. +Grazie a [Mateusz Kornacki](https://x.com/mat_kornacki), [Mike Grabowski](https://x.com/grabbou), [Kris Lis](https://www.linkedin.com/in/krzysztoflisakakris/) e al team di [Callstack](https://www.callstack.com/) per aver co-organizzato React Conf e fornito supporto in design, ingegneria e marketing. Grazie al [team ZeroSlope](https://zeroslopeevents.com/contact-us/): Sunny Leggett, Tracey Harrison, Tara Larish, Whitney Pogue e Brianne Smythia per l'aiuto nell'organizzazione dell'evento. -Thank you to [Jorge Cabiedes Acosta](https://github.com/jorge-cab), [Gijs Weterings](https://x.com/gweterings), [Tim Yung](https://x.com/yungsters), and [Jason Bonta](https://x.com/someextent) for bringing questions from the Discord to the livestream. Thank you to [Lynn Yu](https://github.com/lynnshaoyu) for leading the moderation of the Discord. Thank you to [Seth Webster](https://x.com/sethwebster) for welcoming us each day; and to [Christopher Chedeau](https://x.com/vjeux), [Kevin Gozali](https://x.com/fkgozali), and [Pieter De Baets](https://x.com/Javache) for joining us with a special message during the after-party. +Grazie a [Jorge Cabiedes Acosta](https://github.com/jorge-cab), [Gijs Weterings](https://x.com/gweterings), [Tim Yung](https://x.com/yungsters) e [Jason Bonta](https://x.com/someextent) per aver portato le domande da Discord allo streaming live. Grazie a [Lynn Yu](https://github.com/lynnshaoyu) per aver guidato la moderazione di Discord. Grazie a [Seth Webster](https://x.com/sethwebster) per averci dato il benvenuto ogni giorno; e a [Christopher Chedeau](https://x.com/vjeux), [Kevin Gozali](https://x.com/fkgozali) e [Pieter De Baets](https://x.com/Javache) per essersi uniti a noi con un messaggio speciale durante l'after-party. -Thank you to [Kadi Kraman](https://x.com/kadikraman), [Beto](https://x.com/betomoedano) and [Nicolas Solerieu](https://www.linkedin.com/in/nicolas-solerieu/) for building the conference mobile app. Thank you [Wojtek Szafraniec](https://x.com/wojteg1337) for help with the conference website. Thank you to [Mustache](https://www.mustachepower.com/) & [Cornerstone](https://cornerstoneav.com/) for the visuals, stage, and sound; and to the Westin Hotel for hosting us. +Grazie a [Kadi Kraman](https://x.com/kadikraman), [Beto](https://x.com/betomoedano) e [Nicolas Solerieu](https://www.linkedin.com/in/nicolas-solerieu/) per aver costruito l'app mobile della conferenza. Grazie a [Wojtek Szafraniec](https://x.com/wojteg1337) per l'aiuto con il sito della conferenza. Grazie a [Mustache](https://www.mustachepower.com/) e [Cornerstone](https://cornerstoneav.com/) per visual, palco e audio; e al Westin Hotel per averci ospitato. -Thank you to all the sponsors who made the event possible: [Amazon](https://www.developer.amazon.com), [MUI](https://mui.com/), [Vercel](https://vercel.com/), [Expo](https://expo.dev/), [RedwoodSDK](https://rwsdk.com), [Ag Grid](https://www.ag-grid.com), [RevenueCat](https://www.revenuecat.com/), [Resend](https://resend.com), [Mux](https://www.mux.com/), [Old Mission](https://www.oldmissioncapital.com/), [Arcjet](https://arcjet.com), [Infinite Red](https://infinite.red/), and [RenderATL](https://renderatl.com). +Grazie a tutti gli sponsor che hanno reso possibile l'evento: [Amazon](https://www.developer.amazon.com), [MUI](https://mui.com/), [Vercel](https://vercel.com/), [Expo](https://expo.dev/), [RedwoodSDK](https://rwsdk.com), [Ag Grid](https://www.ag-grid.com), [RevenueCat](https://www.revenuecat.com/), [Resend](https://resend.com), [Mux](https://www.mux.com/), [Old Mission](https://www.oldmissioncapital.com/), [Arcjet](https://arcjet.com), [Infinite Red](https://infinite.red/) e [RenderATL](https://renderatl.com). -Thank you to all the speakers who shared their knowledge and experience with the community. +Grazie a tutti i relatori che hanno condiviso le loro conoscenze e la loro esperienza con la community. -Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together. +Infine, grazie a tutti coloro che hanno partecipato di persona e online per mostrare cosa rende React, React. React è più di una libreria: è una community, ed è stato stimolante vedere tutti riuniti per condividere e imparare insieme. -See you next time! +Ci vediamo la prossima volta! diff --git a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md index a669a2c4e..e91929a35 100644 --- a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md +++ b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md @@ -1,81 +1,87 @@ --- -title: "Critical Security Vulnerability in React Server Components" +title: "Vulnerabilità critica di sicurezza in React Server Components" author: The React Team date: 2025/12/03 -description: There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately. - +description: Esiste una vulnerabilità di esecuzione remota del codice non autenticata in React Server Components. Una correzione è stata pubblicata nelle versioni 19.0.1, 19.1.2 e 19.2.1. Raccomandiamo di aggiornare immediatamente. +translationStatus: ai-draft --- -December 3, 2025 by [The React Team](/community/team) +3 dicembre 2025 del [React Team](/community/team) --- + + +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/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md). + + + -There is an unauthenticated remote code execution vulnerability in React Server Components. +Esiste una vulnerabilità di esecuzione remota del codice non autenticata in React Server Components. -We recommend upgrading immediately. +Raccomandiamo di aggiornare immediatamente. --- -On November 29th, Lachlan Davidson reported a security vulnerability in React that allows unauthenticated remote code execution by exploiting a flaw in how React decodes payloads sent to React Server Function endpoints. +Il 29 novembre, Lachlan Davidson ha segnalato una vulnerabilità di sicurezza in React che consente l'esecuzione remota del codice non autenticata sfruttando un difetto nel modo in cui React decodifica i payload inviati agli endpoint React Server Function. -Even if your app does not implement any React Server Function endpoints it may still be vulnerable if your app supports React Server Components. +Anche se la tua app non implementa alcun endpoint React Server Function, può comunque essere vulnerabile se supporta React Server Components. -This vulnerability was disclosed as [CVE-2025-55182](https://www.cve.org/CVERecord?id=CVE-2025-55182) and is rated CVSS 10.0. +Questa vulnerabilità è stata divulgata come [CVE-2025-55182](https://www.cve.org/CVERecord?id=CVE-2025-55182) ed è classificata CVSS 10.0. -The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: +La vulnerabilità è presente nelle versioni 19.0, 19.1.0, 19.1.1 e 19.2.0 di: * [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack) * [react-server-dom-parcel](https://www.npmjs.com/package/react-server-dom-parcel) * [react-server-dom-turbopack](https://www.npmjs.com/package/react-server-dom-turbopack?activeTab=readme) -## Immediate Action Required {/*immediate-action-required*/} +## Azione immediata richiesta {/*immediate-action-required*/} -A fix was introduced in versions [19.0.1](https://github.com/react/react/releases/tag/v19.0.1), [19.1.2](https://github.com/react/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/react/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. +Una correzione è stata introdotta nelle versioni [19.0.1](https://github.com/react/react/releases/tag/v19.0.1), [19.1.2](https://github.com/react/react/releases/tag/v19.1.2) e [19.2.1](https://github.com/react/react/releases/tag/v19.2.1). Se usi uno dei pacchetti sopra, aggiorna immediatamente a una delle versioni corrette. -If your app’s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. +Se il codice React della tua app non usa un server, la tua app non è interessata da questa vulnerabilità. Se la tua app non usa un framework, un bundler o un plugin per bundler che supporta React Server Components, la tua app non è interessata da questa vulnerabilità. -### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/} +### Framework e bundler interessati {/*affected-frameworks-and-bundlers*/} -Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk). +Alcuni framework e bundler React dipendevano, avevano peer dependency o includevano i pacchetti React vulnerabili. I seguenti framework e bundler React sono interessati: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc) e [rwsdk](https://www.npmjs.com/package/rwsdk). -See the [update instructions below](#update-instructions) for how to upgrade to these patches. +Consulta le [istruzioni di aggiornamento qui sotto](#update-instructions) per sapere come passare a queste patch. -### Hosting Provider Mitigations {/*hosting-provider-mitigations*/} +### Mitigazioni dei provider di hosting {/*hosting-provider-mitigations*/} -We have worked with a number of hosting providers to apply temporary mitigations. +Abbiamo collaborato con diversi hosting provider per applicare mitigazioni temporanee. -You should not depend on these to secure your app, and still update immediately. +Non dovresti fare affidamento su queste per mettere in sicurezza la tua app: aggiorna comunque immediatamente. -### Vulnerability overview {/*vulnerability-overview*/} +### Panoramica della vulnerabilità {/*vulnerability-overview*/} -[React Server Functions](https://react.dev/reference/rsc/server-functions) allow a client to call a function on a server. React provides integration points and tools that frameworks and bundlers use to help React code run on both the client and the server. React translates requests on the client into HTTP requests which are forwarded to a server. On the server, React translates the HTTP request into a function call and returns the needed data to the client. +Le [React Server Functions](https://react.dev/reference/rsc/server-functions) consentono a un client di chiamare una funzione su un server. React fornisce punti di integrazione e strumenti che framework e bundler usano per far girare il codice React sia sul client che sul server. React traduce le richieste sul client in richieste HTTP che vengono inoltrate a un server. Sul server, React traduce la richiesta HTTP in una chiamata di funzione e restituisce al client i dati necessari. -An unauthenticated attacker could craft a malicious HTTP request to any Server Function endpoint that, when deserialized by React, achieves remote code execution on the server. Further details of the vulnerability will be provided after the rollout of the fix is complete. +Un attaccante non autenticato potrebbe creare una richiesta HTTP malevola verso qualsiasi endpoint Server Function che, una volta deserializzata da React, ottiene l'esecuzione remota del codice sul server. Ulteriori dettagli sulla vulnerabilità saranno forniti al termine del rollout della correzione. -## Update Instructions {/*update-instructions*/} +## Istruzioni di aggiornamento {/*update-instructions*/} -These instructions have been updated to include the new vulnerabilities: +Queste istruzioni sono state aggiornate per includere le nuove vulnerabilità: -- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) and [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) (CVSS 7.5) +- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) e [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) (CVSS 7.5) - **Source Code Exposure - Medium Severity**: [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) (CVSS 5.3) -- **Denial of Service - High Severity**: January 26, 2026 [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) +- **Denial of Service - High Severity**: 26 gennaio 2026 [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) -See the [follow-up blog post](/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components) for more info. +Consulta il [post di follow-up](/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components) per maggiori informazioni. ----- -_Updated January 26, 2026._ +_Aggiornato il 26 gennaio 2026._ ### Next.js {/*update-next-js*/} -All users should upgrade to the latest patched version in their release line: +Tutti gli utenti dovrebbero aggiornare all'ultima versione patchata nella propria release line: ```bash npm install next@14.2.35 // for 13.3.x, 13.4.x, 13.5.x, 14.x @@ -94,19 +100,19 @@ npm install next@16.1.0-canary.19 // for 16.x canary releases 15.0.8, 15.1.12, 15.2.9, 15.3.9, 15.4.10, 15.5.10, 15.6.0-canary.61, 16.0.11, 16.1.5 -If you are on version `13.3` or later version of Next.js 13 (`13.3.x`, `13.4.x`, or `13.5.x`) please upgrade to version `14.2.35`. +Se sei sulla versione `13.3` o su una versione successiva di Next.js 13 (`13.3.x`, `13.4.x` o `13.5.x`), aggiorna alla versione `14.2.35`. -If you are on `next@14.3.0-canary.77` or a later canary release, downgrade to the latest stable 14.x release: +Se sei su `next@14.3.0-canary.77` o su una release canary successiva, esegui il downgrade all'ultima release stabile 14.x: ```bash npm install next@14 ``` -See the [Next.js blog](https://nextjs.org/blog/security-update-2025-12-11) for the latest update instructions and the [previous changelog](https://nextjs.org/blog/CVE-2025-66478) for more info. +Consulta il [blog di Next.js](https://nextjs.org/blog/security-update-2025-12-11) per le istruzioni di aggiornamento più recenti e il [changelog precedente](https://nextjs.org/blog/CVE-2025-66478) per maggiori informazioni. ### React Router {/*update-react-router*/} -If you are using React Router's unstable RSC APIs, you should upgrade the following package.json dependencies if they exist: +Se usi le API RSC instabili di React Router, dovresti aggiornare le seguenti dipendenze in package.json se presenti: ```bash npm install react@latest @@ -118,39 +124,39 @@ npm install @vitejs/plugin-rsc@latest ### Expo {/*expo*/} -To learn more about mitigating, read the article on [expo.dev/changelog](https://expo.dev/changelog/mitigating-critical-security-vulnerability-in-react-server-components). +Per saperne di più sulle mitigazioni, leggi l'articolo su [expo.dev/changelog](https://expo.dev/changelog/mitigating-critical-security-vulnerability-in-react-server-components). ### Redwood SDK {/*update-redwood-sdk*/} -Ensure you are on rwsdk>=1.0.0-alpha.0 +Assicurati di essere su rwsdk>=1.0.0-alpha.0 -For the latest beta version: +Per l'ultima versione beta: ```bash npm install rwsdk@latest ``` -Upgrade to the latest `react-server-dom-webpack`: +Aggiorna all'ultima versione di `react-server-dom-webpack`: ```bash npm install react@latest react-dom@latest react-server-dom-webpack@latest ``` -See [Redwood docs](https://docs.rwsdk.com/migrating/) for more migration instructions. +Consulta la [documentazione Redwood](https://docs.rwsdk.com/migrating/) per ulteriori istruzioni di migrazione. ### Waku {/*update-waku*/} -Upgrade to the latest `react-server-dom-webpack`: +Aggiorna all'ultima versione di `react-server-dom-webpack`: ```bash npm install react@latest react-dom@latest react-server-dom-webpack@latest waku@latest ``` -See [Waku announcement](https://github.com/wakujs/waku/discussions/1823) for more migration instructions. +Consulta l'[annuncio Waku](https://github.com/wakujs/waku/discussions/1823) per ulteriori istruzioni di migrazione. ### `@vitejs/plugin-rsc` {/*vitejs-plugin-rsc*/} -Upgrade to the latest RSC plugin: +Aggiorna all'ultimo plugin RSC: ```bash npm install react@latest react-dom@latest @vitejs/plugin-rsc@latest @@ -158,7 +164,7 @@ npm install react@latest react-dom@latest @vitejs/plugin-rsc@latest ### `react-server-dom-parcel` {/*update-react-server-dom-parcel*/} -Update to the latest version: +Aggiorna all'ultima versione: ```bash npm install react@latest react-dom@latest react-server-dom-parcel@latest @@ -166,7 +172,7 @@ Update to the latest version: ### `react-server-dom-turbopack` {/*update-react-server-dom-turbopack*/} -Update to the latest version: +Aggiorna all'ultima versione: ```bash npm install react@latest react-dom@latest react-server-dom-turbopack@latest @@ -174,7 +180,7 @@ Update to the latest version: ### `react-server-dom-webpack` {/*update-react-server-dom-webpack*/} -Update to the latest version: +Aggiorna all'ultima versione: ```bash npm install react@latest react-dom@latest react-server-dom-webpack@latest @@ -183,26 +189,26 @@ npm install react@latest react-dom@latest react-server-dom-webpack@latest ### React Native {/*react-native*/} -For React Native users not using a monorepo or `react-dom`, your `react` version should be pinned in your `package.json`, and there are no additional steps needed. +Per gli utenti React Native che non usano un monorepo o `react-dom`, la versione di `react` dovrebbe essere fissata nel `package.json` e non sono necessari passaggi aggiuntivi. -If you are using React Native in a monorepo, you should update _only_ the impacted packages if they are installed: +Se usi React Native in un monorepo, dovresti aggiornare _solo_ i pacchetti interessati se installati: - `react-server-dom-webpack` - `react-server-dom-parcel` - `react-server-dom-turbopack` -This is required to mitigate the security advisory, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. +Questo è necessario per mitigare l'avviso di sicurezza, ma non devi aggiornare `react` e `react-dom`, quindi non causerà l'errore di version mismatch in React Native. -See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. +Consulta [questo issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) per maggiori informazioni. -## Timeline {/*timeline*/} +## Cronologia {/*timeline*/} -* **November 29th**: Lachlan Davidson reported the security vulnerability via [Meta Bug Bounty](https://bugbounty.meta.com/). -* **November 30th**: Meta security researchers confirmed and began working with the React team on a fix. -* **December 1st**: A fix was created and the React team began working with affected hosting providers and open source projects to validate the fix, implement mitigations and roll out the fix -* **December 3rd**: The fix was published to npm and the publicly disclosed as CVE-2025-55182. +* **29 novembre**: Lachlan Davidson ha segnalato la vulnerabilità di sicurezza tramite [Meta Bug Bounty](https://bugbounty.meta.com/). +* **30 novembre**: I ricercatori di sicurezza Meta hanno confermato e iniziato a collaborare con il team React su una correzione. +* **1 dicembre**: È stata creata una correzione e il team React ha iniziato a collaborare con hosting provider e progetti open source interessati per validare la correzione, implementare mitigazioni e distribuire la fix +* **3 dicembre**: La correzione è stata pubblicata su npm e divulgata pubblicamente come CVE-2025-55182. -## Attribution {/*attribution*/} +## Attribuzione {/*attribution*/} -Thank you to [Lachlan Davidson](https://github.com/lachlan2k) for discovering, reporting, and working to help fix this vulnerability. +Grazie a [Lachlan Davidson](https://github.com/lachlan2k) per aver scoperto, segnalato e contribuito a correggere questa vulnerabilità. diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md index 206d49e39..fd2c0a120 100644 --- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md +++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md @@ -1,152 +1,157 @@ --- -title: "Denial of Service and Source Code Exposure in React Server Components" +title: "Denial of Service ed esposizione del codice sorgente in React Server Components" author: The React Team date: 2025/12/11 -description: Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability. High vulnerability Denial of Service (CVE-2025-55184), and medium vulnerability Source Code Exposure (CVE-2025-55183) +description: I ricercatori di sicurezza hanno trovato e divulgato due vulnerabilità aggiuntive in React Server Components mentre tentavano di sfruttare le patch della vulnerabilità critica della scorsa settimana. Vulnerabilità ad alta severità Denial of Service (CVE-2025-55184) e vulnerabilità a severità media Source Code Exposure (CVE-2025-55183) +translationStatus: ai-draft +--- + +11 dicembre 2025 del [React Team](/community/team) +_Aggiornato il 26 gennaio 2026._ --- -December 11, 2025 by [The React Team](/community/team) + -_Updated January 26, 2026._ +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/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md). ---- + -Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability. +I ricercatori di sicurezza hanno trovato e divulgato due vulnerabilità aggiuntive in React Server Components mentre tentavano di sfruttare le patch della vulnerabilità critica della scorsa settimana. -**These new vulnerabilities do not allow for Remote Code Execution.** The patch for React2Shell remains effective at mitigating the Remote Code Execution exploit. +**Queste nuove vulnerabilità non consentono l'esecuzione remota del codice.** La patch per React2Shell resta efficace nel mitigare l'exploit di esecuzione remota del codice. --- -The new vulnerabilities are disclosed as: +Le nuove vulnerabilità sono divulgate come: -- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184), [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779), and [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) +- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184), [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) e [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) - **Source Code Exposure - Medium Severity**: [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) (CVSS 5.3) -We recommend upgrading immediately due to the severity of the newly disclosed vulnerabilities. +Raccomandiamo di aggiornare immediatamente a causa della severità delle vulnerabilità appena divulgate. -#### The patches published earlier are vulnerable. {/*the-patches-published-earlier-are-vulnerable*/} +#### Le patch pubblicate in precedenza sono vulnerabili. {/*the-patches-published-earlier-are-vulnerable*/} -If you already updated for the previous vulnerabilities, you will need to update again. +Se hai già aggiornato per le vulnerabilità precedenti, dovrai aggiornare di nuovo. -If you updated to 19.0.3, 19.1.4, and 19.2.3, [these are incomplete](#additional-fix-published), and you will need to update again. +Se hai aggiornato a 19.0.3, 19.1.4 e 19.2.3, [queste sono incomplete](#additional-fix-published) e dovrai aggiornare di nuovo. -Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps. +Consulta [le istruzioni nel post precedente](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) per i passaggi di aggiornamento. ----- -_Updated January 26, 2026._ +_Aggiornato il 26 gennaio 2026._ -Further details of these vulnerabilities will be provided after the rollout of the fixes are complete. +Ulteriori dettagli su queste vulnerabilità saranno forniti al termine del rollout delle correzioni. -## Immediate Action Required {/*immediate-action-required*/} +## Azione immediata richiesta {/*immediate-action-required*/} -These vulnerabilities are present in the same packages and versions as [CVE-2025-55182](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components). +Queste vulnerabilità sono presenti negli stessi pacchetti e versioni di [CVE-2025-55182](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components). -This includes 19.0.0, 19.0.1, 19.0.2, 19.0.3, 19.1.0, 19.1.1, 19.1.2, 19.1.3, 19.2.0, 19.2.1, 19.2.2, and 19.2.3 of: +Ciò include 19.0.0, 19.0.1, 19.0.2, 19.0.3, 19.1.0, 19.1.1, 19.1.2, 19.1.3, 19.2.0, 19.2.1, 19.2.2 e 19.2.3 di: * [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack) * [react-server-dom-parcel](https://www.npmjs.com/package/react-server-dom-parcel) * [react-server-dom-turbopack](https://www.npmjs.com/package/react-server-dom-turbopack?activeTab=readme) -Fixes were backported to versions 19.0.4, 19.1.5, and 19.2.4. If you are using any of the above packages please upgrade to any of the fixed versions immediately. +Le correzioni sono state backportate nelle versioni 19.0.4, 19.1.5 e 19.2.4. Se usi uno dei pacchetti sopra, aggiorna immediatamente a una delle versioni corrette. -As before, if your app’s React code does not use a server, your app is not affected by these vulnerabilities. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by these vulnerabilities. +Come prima, se il codice React della tua app non usa un server, la tua app non è interessata da queste vulnerabilità. Se la tua app non usa un framework, un bundler o un plugin per bundler che supporta React Server Components, la tua app non è interessata da queste vulnerabilità. -#### It’s common for critical CVEs to uncover follow‑up vulnerabilities. {/*its-common-for-critical-cves-to-uncover-followup-vulnerabilities*/} +#### È comune che CVE critiche portino alla scoperta di vulnerabilità successive. {/*its-common-for-critical-cves-to-uncover-followup-vulnerabilities*/} -When a critical vulnerability is disclosed, researchers scrutinize adjacent code paths looking for variant exploit techniques to test whether the initial mitigation can be bypassed. +Quando viene divulgata una vulnerabilità critica, i ricercatori analizzano i percorsi di codice adiacenti cercando tecniche di exploit varianti per verificare se la mitigazione iniziale possa essere aggirata. -This pattern shows up across the industry, not just in JavaScript. For example, after [Log4Shell](https://nvd.nist.gov/vuln/detail/cve-2021-44228), additional CVEs ([1](https://nvd.nist.gov/vuln/detail/cve-2021-45046), [2](https://nvd.nist.gov/vuln/detail/cve-2021-45105)) were reported as the community probed the original fix. +Questo schema si osserva in tutto il settore, non solo in JavaScript. Ad esempio, dopo [Log4Shell](https://nvd.nist.gov/vuln/detail/cve-2021-44228), sono stati segnalati CVE aggiuntivi ([1](https://nvd.nist.gov/vuln/detail/cve-2021-45046), [2](https://nvd.nist.gov/vuln/detail/cve-2021-45105)) mentre la community analizzava la correzione originale. -Additional disclosures can be frustrating, but they are generally a sign of a healthy response cycle. +Divulgazioni aggiuntive possono essere frustranti, ma in genere sono segno di un ciclo di risposta sano. -### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/} +### Framework e bundler interessati {/*affected-frameworks-and-bundlers*/} -Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk). +Alcuni framework e bundler React dipendevano, avevano peer dependency o includevano i pacchetti React vulnerabili. I seguenti framework e bundler React sono interessati: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc) e [rwsdk](https://www.npmjs.com/package/rwsdk). -Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps. +Consulta [le istruzioni nel post precedente](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) per i passaggi di aggiornamento. -### Hosting Provider Mitigations {/*hosting-provider-mitigations*/} +### Mitigazioni dei provider di hosting {/*hosting-provider-mitigations*/} -As before, we have worked with a number of hosting providers to apply temporary mitigations. +Come prima, abbiamo collaborato con diversi hosting provider per applicare mitigazioni temporanee. -You should not depend on these to secure your app, and still update immediately. +Non dovresti fare affidamento su queste per mettere in sicurezza la tua app: aggiorna comunque immediatamente. ### React Native {/*react-native*/} -For React Native users not using a monorepo or `react-dom`, your `react` version should be pinned in your `package.json`, and there are no additional steps needed. +Per gli utenti React Native che non usano un monorepo o `react-dom`, la versione di `react` dovrebbe essere fissata nel `package.json` e non sono necessari passaggi aggiuntivi. -If you are using React Native in a monorepo, you should update _only_ the impacted packages if they are installed: +Se usi React Native in un monorepo, dovresti aggiornare _solo_ i pacchetti interessati se installati: - `react-server-dom-webpack` - `react-server-dom-parcel` - `react-server-dom-turbopack` -This is required to mitigate the security advisories, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. +Questo è necessario per mitigare gli avvisi di sicurezza, ma non devi aggiornare `react` e `react-dom`, quindi non causerà l'errore di version mismatch in React Native. -See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. +Consulta [questo issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) per maggiori informazioni. --- -## High Severity: Multiple Denial of Service {/*high-severity-multiple-denial-of-service*/} +## Alta severità: denial of service multipli {/*high-severity-multiple-denial-of-service*/} **CVEs:** [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) **Base Score:** 7.5 (High) -**Date**: January 26, 2026 +**Date**: 26 gennaio 2026 -Security researchers discovered additional DoS vulnerabilities still exist in React Server Components. +I ricercatori di sicurezza hanno scoperto che esistono ancora vulnerabilità DoS aggiuntive in React Server Components. -The vulnerabilities are triggered by sending specially crafted HTTP requests to Server Function endpoints, and could lead to server crashes, out-of-memory exceptions or excessive CPU usage; depending on the vulnerable code path being exercised, the application configuration and application code. +Le vulnerabilità sono attivate inviando richieste HTTP appositamente create agli endpoint Server Function e possono portare a crash del server, eccezioni out-of-memory o uso eccessivo della CPU; a seconda del percorso di codice vulnerabile esercitato, della configurazione dell'applicazione e del codice applicativo. -The patches published January 26th mitigate these DoS vulnerabilities. +Le patch pubblicate il 26 gennaio mitigano queste vulnerabilità DoS. -#### Additional fixes published {/*additional-fix-published*/} +#### Pubblicate correzioni aggiuntive {/*additional-fix-published*/} -The original fix addressing the DoS in [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) was incomplete. +La correzione originale che affrontava il DoS in [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) era incompleta. -This left previous versions vulnerable. Versions 19.0.4, 19.1.5, 19.2.4 are safe. +Ciò ha lasciato vulnerabili le versioni precedenti. Le versioni 19.0.4, 19.1.5 e 19.2.4 sono sicure. ----- -_Updated January 26, 2026._ +_Aggiornato il 26 gennaio 2026._ --- -## High Severity: Denial of Service {/*high-severity-denial-of-service*/} +## Alta severità: denial of service {/*high-severity-denial-of-service*/} -**CVEs:** [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) and [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) +**CVEs:** [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) e [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) **Base Score:** 7.5 (High) -Security researchers have discovered that a malicious HTTP request can be crafted and sent to any Server Functions endpoint that, when deserialized by React, can cause an infinite loop that hangs the server process and consumes CPU. Even if your app does not implement any React Server Function endpoints it may still be vulnerable if your app supports React Server Components. +I ricercatori di sicurezza hanno scoperto che una richiesta HTTP malevola può essere creata e inviata a qualsiasi endpoint Server Functions che, una volta deserializzata da React, può causare un loop infinito che blocca il processo del server e consuma CPU. Anche se la tua app non implementa alcun endpoint React Server Function, può comunque essere vulnerabile se supporta React Server Components. -This creates a vulnerability vector where an attacker may be able to deny users from accessing the product, and potentially have a performance impact on the server environment. +Questo crea un vettore di vulnerabilità in cui un attaccante potrebbe negare agli utenti l'accesso al prodotto e potenzialmente avere un impatto sulle performance dell'ambiente server. -The patches published today mitigate by preventing the infinite loop. +Le patch pubblicate oggi mitigano impedendo il loop infinito. -## Medium Severity: Source Code Exposure {/*low-severity-source-code-exposure*/} +## Severità media: esposizione del codice sorgente {/*low-severity-source-code-exposure*/} **CVE:** [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) **Base Score**: 5.3 (Medium) -A security researcher has discovered that a malicious HTTP request sent to a vulnerable Server Function may unsafely return the source code of any Server Function. Exploitation requires the existence of a Server Function which explicitly or implicitly exposes a stringified argument: +Un ricercatore di sicurezza ha scoperto che una richiesta HTTP malevola inviata a una Server Function vulnerabile può restituire in modo non sicuro il codice sorgente di qualsiasi Server Function. Lo sfruttamento richiede l'esistenza di una Server Function che espone esplicitamente o implicitamente un argomento stringificato: ```javascript 'use server'; @@ -161,42 +166,42 @@ export async function serverFunction(name) { }} ``` -An attacker may be able to leak the following: +Un attaccante potrebbe essere in grado di far trapelare quanto segue: ```txt 0:{"a":"$@1","f":"","b":"Wy43RxUKdxmr5iuBzJ1pN"} 1:{"id":"tva1sfodwq","message":"Hello, async function(a){console.log(\"serverFunction\");let b=i.createConnection(\"SECRET KEY\");return{id:(await b.createUser(a)).id,message:`Hello, ${a}!`}}!"} ``` -The patches published today prevent stringifying the Server Function source code. +Le patch pubblicate oggi impediscono la stringificazione del codice sorgente della Server Function. -#### Only secrets in source code may be exposed. {/*only-secrets-in-source-code-may-be-exposed*/} +#### Possono essere esposti solo segreti nel codice sorgente. {/*only-secrets-in-source-code-may-be-exposed*/} -Secrets hardcoded in source code may be exposed, but runtime secrets such as `process.env.SECRET` are not affected. +I segreti hardcoded nel codice sorgente possono essere esposti, ma i segreti a runtime come `process.env.SECRET` non sono interessati. -The scope of the exposed code is limited to the code inside the Server Function, which may include other functions depending on the amount of inlining your bundler provides. +L'ambito del codice esposto è limitato al codice all'interno della Server Function, che può includere altre funzioni a seconda dell'inlining fornito dal bundler. -Always verify against production bundles. +Verifica sempre contro i bundle di produzione. --- -## Timeline {/*timeline*/} -* **December 3rd**: Leak reported to Vercel and [Meta Bug Bounty](https://bugbounty.meta.com/) by [Andrew MacPherson](https://github.com/AndrewMohawk). -* **December 4th**: Initial DoS reported to [Meta Bug Bounty](https://bugbounty.meta.com/) by [RyotaK](https://ryotak.net). -* **December 6th**: Both issues confirmed by the React team, and the team began investigating. -* **December 7th**: Initial fixes created and the React team began verifying and planning new patch. -* **December 8th**: Affected hosting providers and open source projects notified. -* **December 10th**: Hosting provider mitigations in place and patches verified. -* **December 11th**: Additional DoS reported to [Meta Bug Bounty](https://bugbounty.meta.com/) by Shinsaku Nomura. -* **December 11th**: Patches published and publicly disclosed as [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) and [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184). -* **December 11th**: Missing DoS case found internally, patched and publicly disclosed as [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779). -* **January 26th**: Additional DoS cases found, patched, and publicly disclosed as [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864). +## Cronologia {/*timeline*/} +* **3 dicembre**: Leak segnalato a Vercel e [Meta Bug Bounty](https://bugbounty.meta.com/) da [Andrew MacPherson](https://github.com/AndrewMohawk). +* **4 dicembre**: DoS iniziale segnalato a [Meta Bug Bounty](https://bugbounty.meta.com/) da [RyotaK](https://ryotak.net). +* **6 dicembre**: Entrambi i problemi confermati dal team React, che ha iniziato le indagini. +* **7 dicembre**: Correzioni iniziali create e il team React ha iniziato a verificare e pianificare una nuova patch. +* **8 dicembre**: Hosting provider e progetti open source interessati notificati. +* **10 dicembre**: Mitigazioni degli hosting provider attive e patch verificate. +* **11 dicembre**: DoS aggiuntivo segnalato a [Meta Bug Bounty](https://bugbounty.meta.com/) da Shinsaku Nomura. +* **11 dicembre**: Patch pubblicate e divulgate pubblicamente come [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) e [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184). +* **11 dicembre**: Caso DoS mancante trovato internamente, patchato e divulgato pubblicamente come [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779). +* **26 gennaio**: Casi DoS aggiuntivi trovati, patchati e divulgati pubblicamente come [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864). --- -## Attribution {/*attribution*/} +## Attribuzione {/*attribution*/} -Thank you to [Andrew MacPherson (AndrewMohawk)](https://github.com/AndrewMohawk) for reporting the Source Code Exposure, [RyotaK](https://ryotak.net) from GMO Flatt Security Inc and Shinsaku Nomura of Bitforest Co., Ltd. for reporting the Denial of Service vulnerabilities. Thank you to [Mufeed VH](https://x.com/mufeedvh) from [Winfunc Research](https://winfunc.com), [Joachim Viide](https://jviide.iki.fi), [RyotaK](https://ryotak.net) from [GMO Flatt Security Inc](https://flatt.tech/en/) and Xiangwei Zhang of Tencent Security YUNDING LAB for reporting the additional DoS vulnerabilities. +Grazie a [Andrew MacPherson (AndrewMohawk)](https://github.com/AndrewMohawk) per aver segnalato la Source Code Exposure, [RyotaK](https://ryotak.net) di GMO Flatt Security Inc e Shinsaku Nomura di Bitforest Co., Ltd. per aver segnalato le vulnerabilità Denial of Service. Grazie a [Mufeed VH](https://x.com/mufeedvh) di [Winfunc Research](https://winfunc.com), [Joachim Viide](https://jviide.iki.fi), [RyotaK](https://ryotak.net) di [GMO Flatt Security Inc](https://flatt.tech/en/) e Xiangwei Zhang di Tencent Security YUNDING LAB per aver segnalato le vulnerabilità DoS aggiuntive. diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 12f278cea..d5a36f865 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -26,22 +26,22 @@ "path": "/blog/2026/02/24/the-react-foundation" }, { - "title": "Denial of Service and Source Code Exposure in React Server Components", - "titleForHomepage": "Additional Vulnerabilities in RSC", + "title": "Denial of Service ed esposizione del codice sorgente in React Server Components", + "titleForHomepage": "Vulnerabilità aggiuntive in RSC", "icon": "blog", "date": "December 11, 2025", "path": "/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components" }, { - "title": "Critical Security Vulnerability in React Server Components", - "titleForHomepage": "Vulnerability in React Server Components", + "title": "Vulnerabilità critica di sicurezza in React Server Components", + "titleForHomepage": "Vulnerabilità in React Server Components", "icon": "blog", "date": "December 3, 2025", "path": "/blog/2025/12/03/critical-security-vulnerability-in-react-server-components" }, { - "title": "React Conf 2025 Recap", - "titleForHomepage": "React Conf 2025 Recap", + "title": "Resoconto di React Conf 2025", + "titleForHomepage": "Resoconto di React Conf 2025", "icon": "blog", "date": "October 16, 2025", "path": "/blog/2025/10/16/react-conf-2025-recap" @@ -54,8 +54,8 @@ "path": "/blog/2025/10/07/react-compiler-1" }, { - "title": "Introducing the React Foundation", - "titleForHomepage": "Introducing the React Foundation", + "title": "Presentazione della React Foundation", + "titleForHomepage": "Presentazione della React Foundation", "icon": "blog", "date": "October 7, 2025", "path": "/blog/2025/10/07/introducing-the-react-foundation" @@ -75,8 +75,8 @@ "path": "/blog/2025/04/23/react-labs-view-transitions-activity-and-more" }, { - "title": "Sunsetting Create React App", - "titleForHomepage": "Sunsetting Create React App", + "title": "Deprecazione di Create React App", + "titleForHomepage": "Deprecazione di Create React App", "icon": "blog", "date": "February 14, 2025", "path": "/blog/2025/02/14/sunsetting-create-react-app"