Usage in MPA frameworks with SSR?

[miguelrk]

SignalDB is just what I've been taking a go at for quite some time, but better. 🎉 Glad I stumbled with it...

The thing is, I'm currently building full-stack MPAs (rather than client-only SPAs) using the Deno Fresh framwork, which is Preact-based and supports the Islands architecture, but its primarily an SSR framework. I got Fresh+SignalDB working using signaldb-plugin-preact, but I'm not really sure if SignalDB makes sense in a MPA architecture with traditional navigation and not client-side navigation.

The question is more of a conceptual one, rather than a how-to on integrating SignalDB with Fresh:

Does SignalDB play well in a MPA architecture? What patterns would make sense to use SignalDB in the client-side of a MPA application with traditional (server-side) navigation?

Lifecycle of an optimistic UI

Considering the following diagram of the "lifecycle of an optimistic UI", I guess this pattern does make sense for MPA applications when we consider each page of the MPA to be separate, so that each optimistic UI lifecycle is tied to the page, in the sense that changing pages simply destroys everything and recreates it (wires everything together) again. Would this be wasting resources?

Any insight is greatly appreciated. Happy to have a discussion on the topic.

[maxnowack]

Hey @miguelrk, glad you found SignalDB!
It looks like whether SignalDB fits well with your project really depends on what you're trying to do. I'm not super familiar with MPA and the Islands architecture myself, but from what I get, SignalDB should work fine with them. Although using SignalDB might make your project a bit bigger, it could also make building your app faster and more enjoyable.

The diagram you shared comes from Meteor, and actually, when I was making SignalDB, I was thinking about how Meteor handles data. I'm aiming to do something similar where you can set up a query with SignalDB, and it takes care of fetching your data and updating your page or part of it automatically whenever your data changes or gets updated (also see #394).

But really, it depends a lot on how much data your app will be handling, how often you'll be reusing that data, and how you've set up SignalDB to save data.

[miguelrk]

Thanks for the thorough response @maxnowack! I'm glad I found about it too!

SignalDB has been working great, the only issue (it's not a SignalDB issue really) has been that data is fetched twice (once on the server and another time while hydrating the island in the client).

I'll try to quickly explain the paper cut with SignalsDB+SSR:

In the SSR context (at least that of Deno Fresh), one cannot simply "send" reactive collection instances from the server to the client since they will not be properly serialized (functions are lost when serializing props from server to client components (or islands)). What can indeed be done, is fetching the data for the collection once on the server, and passing that data (which is indeed JSON-serializable) down to the client, where we could theoretically instantiate a reactive collection, but pass props.data avoiding the re-fetch on first load (during hydration). For subsequent client-side updates, the load() data can indeed be called again.

I guess if I can figure out a way to pass the pre-fetched props.data when instantiating the collection on the client, I could skip the re-fetch once on first load. That should work. Obviously when the page is reloaded, again, the server should load data, and client should use that instead of re-fetching, so I guess this solves it. I'll try it out and report back 👍🏼

[maxnowack]

You can attempt to serialize the memory adapter instance of a collection (which defaults to an array instance) if possible. Then, you could use this serialized memory adapter to instantiate the SignalDB collection. However, I suspect there might be some issues related to indexing since this approach hasn’t been tested yet. I‘ll look into this soon. If successful, this method could potentially eliminate the need for data loading on the client side entirely.

[maxnowack]

I've just added a test case, fixed the indexing and published v0.8.9. In this version it's possible to seed data with a memory adapter. Check out the test case to see how to do that 🙂