RFC: serialize initial data more efficiently to reduce HTML page size by up to 30% uncompressed/17% compressed

[tefkah]

This PR changes the way the initialData/viewData is read/serialized.

Before, it was JSON.stringify'd on an attribute of a script at the bottom. Then that attribute would be read with JSON.parse.

Now, I just set the contents of the HTML directly using dangerouslySetInnerHTML.

Why?

Using base JSON.stringify in React leads to data that looks like

<script
  id="initial-data"
  type="text/plain"
  data-json='{"communityData":{"id":"99608f92-d70f-46c1-a72c-df272215f13e","subdomain":"hdsr","domain":"localhost:9876","title":"Harvard Data Science Review","citeAs":null,"publishAs":null,"description":"","avatar":"https://assets.pubpub.org/3bvhlseh/51561410323594.png","favicon":"https://assets.pubpub.org/950hnhqt/61559316763143.jpg","accentColorLight":"#fdfdfd","accentColorDark"'
/>

All those "s are "s. We are using 5 characters to encode what should be one, so wasteful! Especially when it's the most common character in JSON!

By setting the contents of the script to the initial data using dangerouslySetInnerHTML instead, like so (I stole this way of doing it from Next)

<script id="initial-data" type="application/json">
  {"communityData":{"id":"99608f92-d70f-46c1-a72c-df272215f13e","subdomain":"hdsr","domain":"localhost:9876","title":"Harvard Data Science Review","citeAs":null,"publishAs":null,"description":"","avatar":"https://assets.pubpub.org/3bvhlseh/51561410323594.png","favicon":"https://assets.pubpub.org/950hnhqt/61559316763143.jpg","accentColorLight":"#fdfdfd","accentColorDark":"#a22e37","hideCreatePubButton":true,"headerLogo":"https://assets.pubpub.org/kyko06t9/61561410355932.png","headerLinks":null,"headerColorType":"light","useHeaderTextAccent":true,"hideHero":false,"hideHeaderLogo":true,"heroLogo":"https://assets.pubpub.org/olvl8w80/41561410362785.png","heroBackgroundImage":"https://assets.pubpub.org/8ufa1xkt/01675357574254.png","heroBackgroundColor":"#fdfdfd","heroTextColor":"#000000","useHeaderGradient":false,"heroImage":null,"heroTitle":"","heroText":"A Telescopic, Microscopic, and Kaleidoscopic View of Data Science","heroPrimaryButton":{},"heroSecondaryButton":{},"heroAlign":"left","navigation":[{"id":"cbc54cc7-219c-4629-b0db-0f80f0adcef1","type":"page"},{"id":"201sbblo","title":"Issues","children":[{"id":"3974b7e6-570f-4c04-aeb8-00d73c219756","type":"collection"},{"id":"619bd457-52a5-47a8-ab4f-d8b2c674cd57","type":"collection"},{"id":"49a3a635-40b1-409b-898d-f997431e994f","type":"collection"},{"id":"7e5ac077-16b1-4596-be15-9ac01ef2aca9","type":"collection"},{"id":"c31cf5ee-f2b8-426e-8435-1bd25169aa51","type":"collection"},{"id":"b697ca32-6717-4b25-918c-222507306122","type":"collection"},{"id":"63678f6d-a25f-4b4a-9448-5fa500c271a2","type":"collection"},{"id":"713cbc90-503f-4a49-8059-524b309bb383","type":"collection"}
</script>

we save quite a lot of space.

Here are some numbers for comparison.

Community	Before (gzipped/raw)	After (gzipped/raw)	Change (gzipped/raw)
HDSR (logged in)	195kb/2.0mb	163kb/1.4mb	-16%/-30%
HDSR (logged out)	217kb/2.2mb	180kb/1.5mb	-17%/-31%
JOTE	95kb/651kb	85kb/436kb	-10%/-33%
Cursor	451kb/893kb	447kb/801kb	-1%/-10%

Very intersting that Cursor shows so little change, wonder why!

As you can see, we make quite some saving for literally no cost. The only downside is that the initial data is now more easily readable in the html, but I don't think that's a big deal.

Issue(s) Resolved

Page is big sometimes, saves data.

Test Plan

Should probably do a full test of the app, but in principle this should not change anything!

Screenshots (if applicable)

Optional

Notes/Context/Gotchas

Supporting Docs