Streaming SSR sends HTML progressively from server to client.
Code:
1import { renderToPipeableStream } from "react-dom/server";23app.get("/", (req, res) => {4 const { pipe, abort } = renderToPipeableStream(5 <App url={req.url} />,6 {7 bootstrapScripts: ["/client.js"],8 onShellReady() {9 res.statusCode = 200;10 res.setHeader("Content-type", "text/html");11 pipe(res);12 },13 onShellError(error) {14 res.statusCode = 500;15 res.send("<h1>Error</h1>");16 },17 }18 );19});
How it works:
Benefits:
With Next.js:
1// loading.tsx2export default function Loading() {3 return <div>Loading...</div>;4}56// page.tsx7export default async function Page() {8 const data = await fetchData();9 return <Content data={data} />;10}