Fonctionnement interne du SSR React
Suivez le parcours renderToString/renderToPipeableStream et découvrez comment le client reprend l’hydratation.
Fonctionnement interne du SSR React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Le problème résolu par SSR
React côté client nécessite JavaScript pour effectuer le rendu. Les utilisateurs voient une page blanche jusqu’au chargement et à l’exécution de JS. SSR précompose le HTML sur le serveur afin que les utilisateurs voient immédiatement le contenu, ce qui améliore les performances perçues et le référencement naturel.
renderToString
L’API SSR d’origine : renderToString(<App />) effectue de manière synchrone le rendu de l’arbre de composants sous forme de chaîne HTML sur le serveur.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});Hydratation côté client
Une fois le HTML reçu, le navigateur l’analyse et affiche l’interface. Ensuite, hydrateRoot() de React ajoute les écouteurs d’événements et rend le HTML statique interactif — c’est l’hydratation.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);Ce qui se passe pendant l’hydratation
React parcourt simultanément le DOM rendu par le serveur et le DOM virtuel. S’ils correspondent, React ajoute les écouteurs sans modifier le DOM. S’ils diffèrent, il consigne un avertissement d’hydratation et corrige le DOM.
renderToPipeableStream
L’API de diffusion en continu de React 18 envoie le HTML par blocs à mesure que les données deviennent disponibles, ce qui permet au navigateur d’afficher progressivement le contenu pendant que le serveur traite encore la requête.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense et diffusion en continu
Avec SSR en diffusion continue, les limites Suspense diffusent d’abord la solution de repli, puis la remplacent par le contenu lorsque les données sont disponibles — sans bloquer l’envoi initial du HTML.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Sérialisation des données
Les données récupérées sur le serveur doivent être sérialisées et intégrées au HTML afin que le client puisse les lire pendant l’hydratation sans les récupérer à nouveau.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Différences entre les environnements
Le code serveur s’exécute dans Node.js, et non dans un navigateur. Le code qui fait référence à window, document ou localStorage provoque une erreur sur le serveur. Protégez-le avec typeof window !== 'undefined'.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}Composants serveur React et SSR
SSR effectue le rendu des composants en HTML à chaque requête. Les composants serveur React (RSC) sont différents : leur JS n’est jamais envoyé au client et ils peuvent être asynchrones, mais RSC nécessite un empaqueteur compatible avec le protocole RSC (Next.js, etc.).
Avantages en performances de la diffusion en continu
Le SSR en diffusion continue améliore le délai avant le premier octet (TTFB) de la structure initiale et permet une hydratation sélective — le navigateur peut hydrater les zones interactives avant que le HTML complet de la page ait fini d’être diffusé.
Vérification rapide
Que fait hydrateRoot() différemment de createRoot() lorsque le HTML du serveur existe déjà ?
Récapitulatif
SSR utilise renderToPipeableStream pour envoyer le HTML avant le chargement de JS. Le client appelle hydrateRoot() pour ajouter les écouteurs d’événements au HTML du serveur. Le SSR en diffusion continue avec Suspense envoie d’abord la structure initiale, puis remplit le contenu de manière asynchrone. Protégez les API du navigateur avec typeof window !== 'undefined'.
Apprends React avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 88
- Leçons
- 324
Questions Fréquemment Posées
La leçon « Fonctionnement interne du SSR React » est-elle gratuite ?
Oui — le texte complet de « Fonctionnement interne du SSR React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctionnement interne du SSR React » ?
Suivez le parcours renderToString/renderToPipeableStream et découvrez comment le client reprend l’hydratation. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Fonctionnement interne du SSR React » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement interne du SSR React
- Erreurs d’hydratation : causes et corrections
- Hydratation sélective et HTML diffusé en continu
- Modèle d’architecture en îlots