Description
I've been messing around with trying to get my current project to cater the critical rendering path (i.e. the first ~14kb of data) ASAP. Our landing page is quite heavy in content and takes around 200ms for React.renderToStaticMarkup() to process, which is not the time we want the users to wait until they can get something on their screens. Currently I'm doing it so that it res.write()s everything up until the <body> tag first, then the content, finishing up with a bundled JSON dump of the data the server used to render the page and the ~1kb of JS for webpack bootstrapping. This gets me somewhere, as in you get background color and title in the first rountrip, but no content.
It would be neat if there was a version of React.renderToStaticMarkup() that returned a node stream, and an option to specify some function that tells the number of bytes to render before pushing stuff downstream, for example:
var chunksWritten = 0;
React.renderToStaticMarkupStream({
getChunkSize: function () {
if ( chunksWritten++ === 0 ) {
// first push the first 13kb
return 13 * 1024;
} else {
// push the rest in one big chunk
return -1;
}
},
}).pipe(res);