Lightrun
question-mark
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.

Streaming server-side rendering

See original GitHub issue

React 16 introduced streaming server-side rendering, which (I think) looks like this:

import ReactDOMServer from 'react-dom/server';

app.use('*', (req, res) => {
  res.write('<html><head></head><body><div id="root">');
  ReactDOMServer.renderToNodeStream(<App />).pipe(res);
  res.end('</div></body></html>');
})

It sends down the generated HTML as it comes along, kinda like as if you were streaming a movie that comes along one piece after another. This allows the browser to already start rendering without having to wait for the full document.

This presents challenges for styled-components since we have to inject CSS as we go along, even before we know the full rendered HTML. By the time we have the CSS generated the document head has already been streamed to the client and we can’t just inject stuff there anymore.

I have no idea how streams work, so I have no idea how our API would work or not work in a stream-based setup, but it’d be great to figure out!

Previous discussion: #386 Previous art: @threepointone with glamor-stream

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:13
  • Comments:19 (13 by maintainers)

github_iconTop GitHub Comments

2reactions
wmertenscommented, Oct 31, 2017

Hmm, now that React has fragments it’s feasible to pass along styles together with the component that uses them; and since you know which component you’re passing (most of the time), you could “hold” styles for components that can’t have <style> as a sibling.

In fact, you can now pass styles either as siblings or additional children, so perhaps streaming styles can be done like this: