Qu'est-ce que le rendering ?
En développement web, "rendering" signifie produire le HTML final qu'un navigateur affiche. Le même composant React ou Vue peut être rendu sur le serveur (SSR), dans le navigateur (CSR), au build time (SSG), ou des combinaisons hybrides.
Les frameworks modernes (Next.js, Nuxt, SvelteKit, Astro, Remix) vous permettent de mixer les stratégies rendering par route ou même par composant.
Les cinq stratégies rendering principales
| Stratégie | HTML produit quand ? | Où ? | Meilleur pour |
|---|---|---|---|
| Static Site Generation (SSG) | Build time | Build server | Marketing, blogs, docs |
| Server-Side Rendering (SSR) | Par requête | Serveur | Pages personnalisées |
| Client-Side Rendering (CSR) | Dans le navigateur | Device utilisateur | Dashboards SaaS |
| Incremental Static Regeneration (ISR) | Build + re-build on-demand | Build server | E-commerce |
| Edge Rendering | Par requête au CDN edge | Edge Cloudflare/Vercel | Contenu geo-personnalisé |
Static Site Generation (SSG)
Le HTML est généré une fois au build time et servi comme fichiers statiques depuis CDN.
Pros : Delivery la plus rapide possible, hosting le moins cher.
Cons : Re-build nécessaire pour content updates.
Outils : Astro, Hugo, Jekyll, Gatsby, Next.js, 11ty.
Server-Side Rendering (SSR)
Le HTML est généré sur le serveur pour chaque requête.
Pros : Contenu toujours frais ; SEO-friendly.
Cons : TTFB plus lent que SSG ; besoin serveur running ; cher à scale.
Outils : Next.js, Nuxt, Remix, SvelteKit, Astro.
Client-Side Rendering (CSR)
Le serveur retourne du HTML minimal ; JavaScript rend la page dans le navigateur.
Pros : Hautement interactif ; bon marché à servir.
Cons : First paint lent ; mauvais pour SEO ; payload JS élevé.
Outils : Plain React/Vue/Angular SPA.
Incremental Static Regeneration (ISR)
Combine SSG et SSR.
Outils : Next.js, Astro, Vercel.
Edge Rendering
SSR se passe aux nodes CDN edge.
Outils : Cloudflare Workers, Vercel Edge, Netlify Edge, Deno Deploy.
Hydration : où CSR rencontre SSR/SSG
SSR et SSG produisent du HTML, mais les composants interactifs ont besoin de JavaScript. L'hydration est le processus où le JS client-side "s'attache" au HTML server-rendered.
- Partial hydration (Astro Islands)
- Streaming SSR (React 18)
- Progressive hydration
- Resumability (Qwik)
- HTMX / server components
Comparaison : tradeoffs stratégie rendering
| Métrique | SSG | SSR | CSR | ISR |
|---|---|---|---|---|
| TTFB | Plus rapide | Lent | Rapide | Rapide |
| FCP | Rapide | Moyen | Lent | Rapide |
| SEO | Excellent | Excellent | Besoin hydration | Excellent |
| Personnalisation | Non | Oui | Oui | Limitée |
| Coût hosting | Le moins cher | Cher | Bon marché | Bon marché |
Choisir une stratégie rendering
- Site marketing, blog, docs → SSG.
- Catalogue e-commerce → ISR.
- Dashboard SaaS (logged-in) → CSR ou SSR.
- Site news → SSR ou ISR.
- Landing pages geo-localisées → Edge rendering.
Rendering et Core Web Vitals
- LCP — meilleur avec SSG/SSR.
- INP — hydration lourde tue INP.
- CLS — pages server-rendered sont plus stables.
FAQ : web rendering
SSR ou SSG : lequel est meilleur ?
SSG si le contenu ne change pas souvent. SSR si le contenu est très dynamique.
CSR est-il mort ?
Non — encore idéal pour dashboards apps logged-in.
Quelle est la différence entre SSR et SSG ?
Timing. SSR génère HTML par requête ; SSG au build time.
Qu'est-ce que React Server Components ?
Une feature React où certains composants tournent uniquement côté serveur.
Comment le rendering affecte-t-il le SEO ?
Les crawlers préfèrent du HTML pre-rendered. SSG/SSR sont idéaux.
Testez la performance rendering avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions et load-teste des pages dynamiques avec k6/JMeter. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.