Switch to streaming server rendering

wincent commented 7 years ago

Likely to be in React 16, enabled by the Fiber rewrite. This will be cool because with my current implementation I have traded SEO (server rendering → indexability) for speed (server rendering → synchronous and slow).

wincent commented 6 years ago

Some links:

React 16 API: https://facebook.github.io/react/docs/react-dom-server.html
Intro to streaming in React 16: https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67
Node Stream API: https://nodejs.org/api/stream.html
Streaming ES6 tagged template literals implementation: https://github.com/almost/stream-template (will want something like this to replace Pug, which isn't really Stream-friendly out of the box).

Obviously there are some limitations to how early I can start streaming. In the simplest case, I can start streaming the static parts of the <head> (styles, for example) right away, but there are <meta> tags and <title> that I can't know ahead of time in a lot of cases (ie. they depend on the fetched data, and even on the render result in the case of <title> due to my use of DocumentTitle). Another limiting factor: sometimes we decide to do a redirect as a result of something that happens during rendering. Even so, in the spirit of micro-optimization, probably worth doing.

wincent commented 6 years ago

So I did it, but turns out the wins are pretty small on the main index: might be bigger wins on very large pages. I should also look into whether nginx is buffering the response (or even express) in a way that is hurting us. It is true that we do need to fetch data even before streaming the first bytes, so getting that out of the critical path will help for sure, if it can be done in a non-shitty way.

Before:

After:

wincent commented 6 years ago

To clarify: by "pretty small", I mean, "undetectable".

wincent / masochist

Switch to streaming server rendering #98