Che cos'è l'Edge Rendering?

L'Edge Rendering esegue la logica server-side in una rete distribuita a livello globale di piccoli runtime collocati vicino all'utente finale. Invece di generare l'HTML in un'unica regione di origin, la richiesta viene gestita dal point of presence più vicino. Per le storefront di commerce questo riduce drasticamente il TTFB e abilita una personalizzazione rapida senza rinunciare al SSR.

Definizione

Gli edge runtime come Vercel Edge, Cloudflare Workers, Netlify Edge Functions e Deno Deploy eseguono isolate V8 con budget di CPU e memoria stringenti ma con una latenza di cold start molto bassa. Supportano standard web come Fetch, Streams e Request/Response, il che permette a framework come Next.js, Remix, SvelteKit e Astro di puntare all'edge con lo stesso codice dei componenti usato nei rispettivi runtime Node. L'Edge Rendering si abbina di norma a una content-delivery-network-cdn per la distribuzione degli asset e a un cache-layer come KV storage, R2 o Vercel Data Cache per le risposte API memoizzate.

Perché è importante

La latenza domina la performance percepita e i round trip verso un unico origin possono facilmente aggiungere centinaia di millisecondi per gli utenti lontani da quella regione. Eseguendo la logica di render nello stesso PoP che già serve gli asset statici, l'Edge Rendering porta il TTFB nell'intervallo da 50 a 150 ms a livello globale. Quel budget resta così disponibile per LCP, hydration e chiamate API a valle. Abilita inoltre A/B testing, geo-routing, feature flag e personalizzazione a livello di documento senza una richiesta client-side aggiuntiva che penalizzerebbe INP e CLS.

Casi d'uso

I team di composable commerce usano l'Edge Rendering per le shell delle storefront, i redirect geo-aware, la selezione di valuta e lingua e i frammenti di carrello autenticati. Un setup tipico serve HTML in cache ISR sull'edge e inietta poi frammenti personalizzati tramite streaming-ssr o edge middleware. L'Edge Rendering si sposa naturalmente con l'islands-architecture, dove solo componenti specifici richiedono logica server. Si combina bene anche con i React Server Components in Next.js: i server component vengono eseguiti sull'edge, recuperano i dati da cache layer co-locati e trasmettono l'HTML in streaming al client. Per le storefront globali che sostituiscono una monolithic-architecture, l'Edge Rendering è una delle mosse a maggiore impatto.

Correlati

Esplora Performance and Core Web Vitals · Composable Headless Frontend.