Hydratation sélective et HTML diffusé en continu
Utilisez des frontières Suspense pour diffuser des fragments HTML et hydrater d’abord les îlots interactifs.
Hydratation sélective et HTML diffusé en continu est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 de l’hydratation de toute la page
Le SSR traditionnel hydrate toute la page en une seule fois. Si une partie de la page utilise beaucoup de JavaScript (comme une carte ou un graphique), elle bloque l’hydratation du reste — y compris celle des simples boutons interactifs.
HTML diffusé en continu avec renderToPipeableStream
L’API de diffusion en continu de React 18 envoie le HTML par blocs. La structure initiale de la page arrive immédiatement ; les limites Suspense complètent le contenu à mesure qu’il est disponible — les utilisateurs voient l’interface avant que toutes les données soient prêtes.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Fonctionnement pratique de la diffusion en continu
React effectue immédiatement le rendu des composants qui ne sont pas suspendus (la structure initiale). Lorsque les données d’une limite Suspense sont disponibles, React envoie un bloc HTML pour la compléter, ainsi qu’une balise script indiquant au navigateur où le placer.
Hydratation sélective
Avec la diffusion en continu, React 18 peut hydrater les composants indépendamment. Si un utilisateur clique sur un élément qui n’a pas encore été hydraté, React donne la priorité à l’hydratation de ce composant, puis continue avec le reste.
Les frontières Suspense comme unités de flux
Chaque frontière <Suspense> est une unité de flux. La solution de repli est envoyée immédiatement ; le contenu réel arrive plus tard par flux. Imbriquez les frontières Suspense pour transmettre le contenu avec le niveau de granularité approprié.
function App() {
return (
<Layout>
{/* Streams first — no data needed */}
<Header />
<Suspense fallback={<ArticleSkeleton />}>
{/* Streams when article data resolves */}
<Article />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
{/* Streams independently from Article */}
<Comments />
</Suspense>
</Layout>
);
}Le flux de Next.js avec loading.tsx
Dans le routeur d'application de Next.js, loading.tsx constitue la solution de repli de Suspense. La structure de la page (mise en page) est transmise en premier ; le contenu de la page est transmis lorsque sa fonction asynchrone se résout.
// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
return <ArticleSkeleton />;
}
// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
const posts = await fetchPosts(); // data fetch happens server-side
return <PostList posts={posts} />;
}Composants client dans Suspense
Les composants serveur utilisent Suspense pour transmettre les données. Les composants client utilisent Suspense pour le chargement différé. Les deux bénéficient de l'hydratation sélective.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Hydratation fondée sur les priorités
Si l'utilisateur interagit avec un composant qui n'est pas encore hydraté (par exemple, en cliquant), React 18 hydrate ce composant de manière synchrone en priorité, avant de terminer l'hydratation des autres parties de la page.
onShellReady contre onAllReady
onShellReady se déclenche lorsque la structure (les parties non suspendues) est prête à être transmise. onAllReady se déclenche lorsque tout est rendu — ce qui est utile pour la génération statique ou lorsque vous devez envoyer tout le HTML en une seule fois.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }Contrôleur d'abandon
Transmettez un signal AbortController pour annuler le SSR lors des rendus lents (par exemple, lorsque le délai d'attente est dépassé).
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Mesurer l'impact du flux
Utilisez Lighthouse ou WebPageTest pour mesurer le temps jusqu'au premier octet (TTFB) et le plus grand élément de contenu (LCP) avant et après l'activation du flux, afin de quantifier l'amélioration.
Vérification rapide
Que se passe-t-il dans l'hydratation sélective de React 18 lorsqu'un utilisateur clique sur un élément qui n'a pas encore été hydraté ?
Récapitulatif
Le SSR en flux utilise renderToPipeableStream et les frontières Suspense pour envoyer progressivement le HTML. Chaque frontière Suspense transmet son contenu indépendamment. L'hydratation sélective donne la priorité aux éléments avec lesquels l'utilisateur a interagi. Dans Next.js, loading.tsx est la solution de repli Suspense automatique pour le flux au niveau de la page.
Questions Fréquemment Posées
La leçon « Hydratation sélective et HTML diffusé en continu » est-elle gratuite ?
Oui — le texte complet de « Hydratation sélective et HTML diffusé en continu » 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 « Hydratation sélective et HTML diffusé en continu » ?
Utilisez des frontières Suspense pour diffuser des fragments HTML et hydrater d’abord les îlots interactifs. 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 3 sur 4.
Combien de temps prend la leçon « Hydratation sélective et HTML diffusé en continu » ?
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