Qu'est-ce que le rendu côté serveur (SSR) ?

Le rendu côté serveur génère le HTML d'une page sur un serveur ou un runtime edge à chaque requête, puis envoie le markup entièrement rendu au navigateur. Pour les boutiques headless-commerce, le SSR est la stratégie de rendu par défaut quand le contenu est très dynamique, personnalisé ou doit être SEO-friendly sans attendre le JavaScript côté client.

Définition

Le SSR exécute le même arbre de composants qui serait sinon rendu dans le navigateur, mais l'exécute sur Node.js, Bun, Deno ou un worker edge comme Cloudflare Workers ou Vercel Edge. Le serveur récupère les données auprès des API commerce, contenu, recherche et personnalisation, produit un document HTML et l'expédie au client. Le navigateur reçoit rapidement un premier paint significatif, puis un bundle JavaScript prend le relais via l'hydratation pour rendre la page interactive. Le SSR est proposé clé en main par Next.js, Nuxt, Remix, SvelteKit et Astro, et est souvent combiné à des stratégies de cache comme l'ISR ou le stale-while-revalidate.

Pourquoi c'est important

Le SSR est le chemin le plus sûr vers un bon LCP et un TTFB acceptable sur les pages où les données changent trop souvent pour la static-site-generation ou lorsque la personnalisation est requise. Il permet aux moteurs de recherche d'indexer un markup complet, ce qui compte pour les pages catégorie, les PDP et le contenu de blog. Dans les stacks composable-commerce, le SSR centralise aussi l'orchestration des API : le serveur de la boutique peut fan-out vers le commerce-backend, le CMS, la recherche et les services de recommandation en parallèle, puis assembler un document cohérent. Cela protège le client de la complexité des API et stabilise les Core Web Vitals.

Cas d'usage

Les cas d'usage typiques du SSR incluent les paniers connectés, les prix localisés, les PDP tenant compte du stock et les variantes de landing-page personnalisées. Les équipes headless sur Next.js combinent souvent le SSR avec les React Server Components et le Streaming SSR pour vider le HTML tôt pendant que les données lourdes se résolvent. L'Edge Rendering sur Vercel Edge ou Cloudflare Workers rapproche le SSR des utilisateurs pour les boutiques mondiales. Les stratégies de couche de cache mettent en cache le HTML complet pour le trafic anonyme et retombent sur du SSR par requête pour les sessions personnalisées. Le SSR n'est presque plus un choix binaire ; les stacks modernes mêlent SSR, SSG, ISR et CSR par route pour équilibrer fraîcheur, coût et performance.

Voir aussi

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