Cosa sono i React Server Components (RSC)?

I React Server Components sono una primitiva di rendering React in cui i componenti vengono eseguiti esclusivamente sul server e non inviano mai JavaScript al client. Producono UI serializzata che viene trasmessa in streaming al browser e intercalata con i componenti client tradizionali per l'interattività. Per gli storefront di composable commerce, RSC è il cambiamento più importante in React da quando esistono gli hook.

Definizione

In un framework abilitato a RSC come Next.js App Router o le varianti sperimentali di SvelteKit e Remix, i componenti sono classificati come server o client. I componenti server possono recuperare dati direttamente da database, API di commerce o un content-management-system-cms tramite il file system o le API fetch, restituire un albero React serializzato e vengono completamente esclusi dal bundle client tramite tree-shaking. I componenti client, contrassegnati con use client, restano interattivi e vengono spediti come first-party-JS. Il framework compone i due durante lo streaming-ssr, inviando immediatamente le parti statiche e successivamente le isole interattive. Questo si allinea naturalmente con l'edge rendering e le primitive moderne del cache-layer.

Perché è importante

Il costo maggiore negli storefront React moderni è la dimensione del bundle client e il conseguente lavoro di hydration, entrambi dannosi per l'INP. RSC sposta sul server il data fetching, il templating e persino le librerie di formattazione più pesanti, lasciando sul client solo i componenti realmente interattivi. Le dimensioni dei bundle su PDP e PLP si riducono comunemente dal 40 al 70 percento. Poiché i componenti server trasmettono HTML in streaming, migliora anche l'LCP. RSC semplifica inoltre l'accesso ai dati: invece di effettuare il fetch in useEffect, i componenti attendono i dati durante il render, il che elimina i waterfall lato client.

Casi d'uso

I team di composable commerce su Next.js spostano l'elenco prodotti, la descrizione di categoria, il faceting e i contenuti SEO su componenti server, mantenendo come componenti client il carrello, i selettori di varianti, i moduli mini PDP e i blocchi guidati dalla personalizzazione. I componenti server co-localizzano le chiamate a una storefront-api, a un servizio di ricerca, al motore di raccomandazione e al CMS, beneficiando della memoizzazione delle richieste a livello di cache-layer. L'edge rendering su Vercel Edge o Cloudflare Workers permette di generare gli alberi RSC vicino all'utente. Combinato con un approccio a islands-architecture, RSC offre il modello più efficace per ridurre il first-party-JS mantenendo un'interattività ricca dove conta davvero.

Correlati

Scopri Composable Headless Frontend · Performance and Core Web Vitals.