Improve page performance by using renderToStaticNodeStream

[kevin940726]

Almost everything on the pages are static, we can get rid of renderToString and don't have to include the js files at all. This significantly improve the performance. Below is the lighthouse score comparison running on my macbook pro (2018, 2.7GHz i7, macOS 10.14.6) on page unpkg.com/lodash/ (Applied slow 4G, 4x CPU slowdown).

Before	After

(The resulting 2 points left could be text compression, which can be solved when served via cloudflare.)

We also use renderToStaticNodeStream to stream the result to be able to flush the first bytes to the client more quickly comparing to renderToStaticMarkup.

There are only two places which use client side js I can find. The version selector in the browse page and the stats in the main page.

1. Version selector: It's quite easy to replace the onChange handler with a vanilla js one. We can inline the js file directly below it to save the additional request too.
2. Stats: Currently we fetch the api in useEffect. We can replace all of that with just inlining the result during SSR. One caveat is that if we want to preserve the 1 hour cache-control for stats, we have to also change the main page cache-control from 4 hours to 1 hour. I think it's okay regarding it's not a page which would get requested frequently. Another advantage would be that we can remove localStorage usage too.

Regarding what the vision of this project is, it's either a very good idea or a bad one. Either way, for now it looks like a free optimization. Please let me know your thoughts on this 🙂.

[mjackson]

Thanks for the PR, @kevin940726. I admit that although I have grander plans for the front end than what you currently see on unpkg.com, the scripts are currently overkill. But I'd eventually like to include some more complex interactions on the front-end where React will be very helpful. Also, a couple things:

• the page is server rendered already, so visitors will see stuff before the scripts load and
• those scripts are only going to load on the first visit. They'll be served from cache after that.

So I'm not terribly concerned about the scripts for now. But we may be able to speed up page delivery by using renderToNodeStream on the server instead of renderToString. Care to investigate what that looks like?

[kevin940726]

@mjackson Sure thing! Ha I thought you'd say so, that's why I added the vision part in the original PR body 😂.

I'd like to work on renderToNodeStream! Thx for your feedbacks 🙂

[kevin940726]

@mjackson I've just opened #220, going to close this to keep the discussion clean :).