related_content is heavy in JSON

[peterbe]

In the renderer, we include all the "state" necessary to render a page. It's encoded as JSON into the HTML file. That's so React can hydrate.
Also, if you click on an internal link, in the sidebar for example, it will only need to download the index.json file which is a lot smaller.

That JSON is getting pretty big and I think there's room for improvement/optimizations.

I analyzed the sizes of sub-keys in the client/build/docs/Web/HTML/Element/**/*.json files and concluded this:

related_content                  5358    47%
prose                            2405    21%
contributors                     1627    14%
browser_compatibility            1307    11%
examples                          412     3%
interactive_example_url            70     0%
mdn_url                            58     0%
title                              34     0%
attributes                          2     0%

E.g. a json like this

This all gets gzipped and stuff but let's get performance as a primary thought now rather than an afterthought. But, let's also not prematurely optimize.

[peterbe]

By the way, because of repetition, related_content compresses better. Gzipped:

related_content                  1108    34%
prose                             892    28%
contributors                      416    13%
browser_compatibility             283     8%
examples                          250     7%
interactive_example_url            83     2%
mdn_url                            78     2%
title                              51     1%
attributes                         22     0%

[peterbe]

One interesting solution is to not hydrate with content from a serialized string. Then you get the best of both worlds. You get no re-render on the client-side and you don't have to include all the heavy state in a serialized JSON string.

[peterbe]

A horribly rough draft is: https://github.com/peterbe/stumptown-renderer/tree/hydrate-based-on-dom
It removes the need to include the state serialized. But it breaks hydration.

[peterbe]

A flaw that can't be escaped is that if you follow that idea it means you simply don't get the event handlers. I.e. all onClicks within the Document will not work. And it can't because we never give the React-in-the-browser a chance to build up its own virtual DOM.

[peterbe]

Perhaps, it's a better idea to break apart index.json into index.json and related_content.json and then lazy-load the sidebar with XHR after initial load. Not great either.