Add SSR support

[KyleAMathews]

The basic pattern is that when server rendering, the resolved shapes' data is serialized to the HTML as JSON and then hydrated into shapes again when the client is setup.

We can modify getShape in the client so that when it creates a new shape, it first looks to the HTML for serialized shape data.

[MarioSimou]

What's the required change for this feature?

Reading the code of @electric-sql/react package, it seems that we need to extend the UseShapeOptions options to acccept a shape option. With that way we can preload a shape on the server, pass it down to the client and use it within the useShape hook.

I am available to work on this issue personally if necessary.

[balegas]

I've made some experiments with the pattern in the past. We can definitely use the useShape hook to load a shape that was passed from the server. The challenge, as Kyle points out, is that the shape data needs to be serialised in the HTML when passing the data to the client. I've ended up with this double wrapping pattern to hydrate the shape from the serialized JSON, but I don't think the DX is great and I wanted to revise the server part to be more serverless-friendly. This is how far I got.

It would be awesome if you want to work on a better SSR support for Electric.

[MarioSimou]

Thank you for sharing that.

I'm thinking of experimenting over the weekend to see how much I can achieve.