We are implementing a website for a German newspaper. That website is, let's say, 80% static content, with 20% dynamic and interactive elements on the page.
Because we are seriously performance aware, we are trying to implement partial hydration, ie. SSR a Preact app and
instead of sending the entire app code to the client, we only send those components to the client, that are actually
interactive. Thus we are vastly reducing our bundle size, parsing and execution time. We then only hydrate those parts of
our websites and effectively have multiple render roots on our page.
Because we are using Preact on the client and the server, we are able to have a single codebase. All our programmers have to do is use a tag and the rest works by itself. Example:
<App>
<Header />
<Hydrate>
<SocialShares />
</Hydrate>
<Body />
<Footer />
</App>
A working implementation can be seen here: spring-media/bscmp-evaluation-next-suspense#9d88c5bac1c761
This is how it works and as you can see there is a problem:
If we change the render method, we have a solution:
