Proper hydration in the app shell

[arctic-hen7]

This issue is requesting an enhancement to Perseus. Details of the scope will be available in issue labels.
The user described the problem related to this request as follows:

Right now, Perseus' hydration system is still left over from the days when Sycamore didn't have proper hydration, and it is extremely hacky. While this might not be visible to the user, I think it is adversely impacting the time-to-interactive of Perseus sites, and it also involves the usage of multiple wrapper <div>s, which make full-page layouts that need everything wrapping the page content to be height: 100% unreasonably weird to build (i.e. you need to use height: 100vh, though this is documented for v0.3.x).

The user described the issue as follows:

Perseus should remove these wrapper divs entirely and, rather than shifting the content from the server around and creating invisible layout shift that overuses browser rendering processes and slow s us down on mobile, the app shell should actually hydrate the user's content using Sycamore's usual systems. This should of course be able to be controlled with the hydrate feature flag as before.

• The author is willing to attempt an implementation: true

Tribble internal data

dHJpYmJsZS1yZXBvcnRlZCxDLWVuaGFuY2VtZW50LGF1dGhvci13aWxsaW5nLXRvLWltcGw=

[arctic-hen7]

Just working with a vaguely functional version of this in development, and I do believe Perseus just broke 99 Lighthouse scores on mobile for the first time! 🎉 (And that's possibly pessimistic...)

Edit: that was with a development bundle...