Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

question: why don't use renderToNodeStream instead of renderToString?

See original GitHub issue

Hi guys, I love this boilerplace, very clean. But I have a question about react-dom/server

Why don’t we use renderToNodeStream instead of renderToString?

Rendering to a stream can reduce the time to first byte (TTFB) for your content, sending the beginning of the document down the wire to the browser before the next part of the document has even been generated. All major browsers will start parsing and rendering the document earlier when the content is streamed from the server this way.

import { renderToNodeStream } from "react-dom/server"
import MyPage from "./MyPage"app.get("/", (req, res) => {
  res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
  res.write("<div id='content'>"); 
  const stream = renderToNodeStream(<MyPage/>);
  stream.pipe(res, { end: false });
  stream.on('end', () => {
    res.write("</div></body></html>");
    res.end();
  });
});

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:9 (6 by maintainers)

Top GitHub Comments

2reactions

Ridcommented, Aug 16, 2019

I’ve made a fork to test this here: https://github.com/Rid/react-cool-starter

However there are a few issues:

Flickering on initial render as the CSS has to be loaded after renderToNodeStream due to CSS extraction
We’re unable to minify the html as you need the complete rendered html in order to minify

You’re welcome to fork my fork and see if you can address these issues some other way.

1reaction

hienhuynhtmcommented, Aug 23, 2019

@Rid I’ll check your fork, then see that I can fix or not. Anyway, thanks for your support. @wellyshen your project structure & coding standard looks great, I love it 👍