Streaming SSR with Suspense & Selective Hydration

1import React, { Suspense } from 'react';
2
3// Shell: Fast, synchronous, flushed immediately!
4export function NewsPage() {
5  return (
6    <div className="layout">
7      {/* 1. Flushed in first HTTP chunk: Immediate FCP! */}
8      <Header />
9      <Navigation />
10
11      {/* 2. Main content: Fast fetch */}
12      <Suspense fallback={<ArticleSkeleton />}>
13        <TopArticles />
14      </Suspense>
15
16      {/* 3. Slow comments: Does NOT block Header or Articles from rendering/hydrating! */}
17      <Suspense fallback={<CommentsSkeleton />}>
18        <SlowCommentsSection />
19      </Suspense>
20
21      <Footer />
22    </div>
23  );
24}
25
26// Server streaming entry point (Node.js)
27import { renderToPipeableStream } from 'react-dom/server';
28
29export function handleRequest(res: any) {
30  const { pipe } = renderToPipeableStream(<NewsPage />, {
31    bootstrapScripts: ['/main.js'],
32    onShellReady() {
33      // First chunk containing Header, Navigation, and fallbacks sent immediately!
34      res.setHeader('content-type', 'text/html');
35      pipe(res);
36    },
37    onError(err) {
38      console.error('Streaming error:', err);
39    },
40  });
41}