Merge pull request #62 from Ibadichan/update-react-streaming-ssr-exam…

…ple-2 Removed multistream and readableString usage from react SSR
theKashey · Mar 29, 2024 · 44ac5d8 · 44ac5d8
2 parents 5125640 + e709eb6
commit 44ac5d8
Showing 1 changed file with 6 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -233,19 +233,8 @@ app.use('*', async (req, res) => {
 // entry-server.js
 import React from 'react';
 import { renderToPipeableStream } from 'react-dom/server';
-import MultiStream from 'multistream';
-import { Readable } from 'node:stream';
 import App from './App';
 
-// small utility for "readable" streams
-const readableString = string => {
-  const s = new Readable();
-  s.push(string);
-  s.push(null);
-  s._read = () => true;
-  return s;
-};
-
 const ABORT_DELAY = 10000;
 
 async function renderApp({ res, styledStream }) {
@@ -265,19 +254,15 @@ async function renderApp({ res, styledStream }) {
 
         // allow client to start loading js bundle
         res.write(`<!DOCTYPE html><html><head><script defer src="client.js"></script></head><body><div id="root">`);
-
-        const endStream = readableString('</div></body></html>');
-
-        // concatenate all streams together
-        const streams = [
-          styledStream, // the main content
-          endStream, // closing tags
-        ];
-
-        new MultiStream(streams).pipe(res);
 
+        styledStream.pipe(res, { end: false });
+
         // start by piping react and styled transform stream
         pipe(styledStream);
+
+        styledStream.on('end', () => {
+          res.end('</div></body></html>');
+        });
       },
       onError(error) {
         didError = true;