Qu'est-ce que le rendu edge ?

Le rendu edge exécute la logique côté serveur dans un réseau mondialement distribué de petits runtimes situés au plus près de l'utilisateur final. Au lieu de rendre le HTML dans une seule région d'origine, une requête est traitée par le point de présence le plus proche. Pour les boutiques de commerce, cela effondre le TTFB et débloque une personnalisation rapide sans abandonner le SSR.

Définition

Les runtimes edge comme Vercel Edge, Cloudflare Workers, Netlify Edge Functions et Deno Deploy exécutent des isolats V8 avec des budgets CPU et mémoire stricts mais une latence de démarrage à froid très basse. Ils prennent en charge les standards web comme Fetch, Streams et Request/Response, ce qui permet à des frameworks comme Next.js, Remix, SvelteKit et Astro de cibler l'edge avec le même code de composant que leurs runtimes Node. Le rendu edge s'associe généralement à un content-delivery-network-cdn pour la livraison des assets et à une couche de cache comme le stockage KV, R2 ou Vercel Data Cache pour les réponses API mémoïsées.

Pourquoi c'est important

La latence domine la performance perçue, et les allers-retours vers une seule origine peuvent facilement ajouter des centaines de millisecondes pour les utilisateurs éloignés de cette région. En exécutant la logique de rendu dans le même PoP qui sert déjà les assets statiques, le rendu edge ramène le TTFB dans la plage de 50 à 150 ms à l'échelle mondiale. Ce budget est alors disponible pour le LCP, l'hydratation et les appels API en aval. Il permet aussi l'A/B testing, le geo-routing, les feature flags et la personnalisation au niveau du document sans requête côté client supplémentaire qui nuirait à l'INP et au CLS.

Cas d'usage

Les équipes composable-commerce utilisent le rendu edge pour les shells de boutique, les redirections géo-conscientes, la sélection de devise et de langue, et les fragments de panier authentifiés. Une configuration typique exécute du HTML mis en cache par ISR à l'edge, puis injecte des fragments personnalisés via le streaming-ssr ou un middleware edge. Le rendu edge s'accorde naturellement avec l'islands-architecture, où seuls certains composants ont besoin de logique serveur. Il se marie aussi bien avec les React Server Components dans Next.js : les composants serveur s'exécutent à l'edge, récupèrent les données auprès de couches de cache colocalisées et streament le HTML vers le client. Pour les boutiques mondiales remplaçant une monolithic-architecture, le rendu edge est l'un des leviers à plus fort impact.

Voir aussi

Découvrez Performance and Core Web Vitals · Composable Headless Frontend.