Idiomatic way to do SSR forms

[H14]

I am trying to understand the best way to use SSR forms and integrate optimistic updates (or not) into my application.

I use a page endpoint that generates a full grid of users. This data comes from other sources. On this grid, basic (e.g. add, delete, edit) and more advanced (e.g. tagging) operations can be performed.

In the spirit of the demo todo application, I try to think in terms of standard web forms that also work without javascript and can therefore be handled completely via SSR. That also seems to be the idiomatic way to work with sveltekit. I find little else to hold on to.

What strikes me is that this does ensure that with every action (add, delete, edit), the entire dataset is reloaded. Even when the client side router takes over and the form is enriched (as in the todo example). That makes sense, but is that the only way? Is it the best way? What about larger/longer data sets? Am I supposed to implement some sort of optimistic updates to mask a possibly slower full reload of a larger dataset?

I am also struggling with the more complex actions within my user list. Basic actions can be handled via the page endpoint itself, but for many other actions (e.g. tagging), I feel the need to move to separate stand-alone endpoints for those forms. But I get very lost in invalidating / reloading the right data at the right time and neatly transitioning and animating the right elements. At that point I also doubt whether it wouldn't save myself a lot of trouble to leave out the SSR forms and just fetch directly and handle this via the 'regular' svelte? But then I get the feeling I am giving up something quite fundamental?

I'm not sure if I'm in the right place with my questions and concerns, but I'm not sure anymore. Does anyone have any pointers, projects or examples?

I am aware of #3533, I think it would help, but I still feel clueless.

Thanks

[stephane-vanraes]

When you have such complex data, it is best to use a sort of hybrid way of handling the interactions.

You start with what you already have, where everything goes to the server and back again. This will work fine for users that do not have JavaScript and keeps your site usable for them.

However, you hijack all these form actions to do 'optimistic updates' that do not trigger a full re-render for the users that do have JavaScript enabled, this can be easily done by using |preventDefault. Just remember that in these cases you should not invalidate your data because that will trigger a request for data. You basically have to update the data in place instead. You should of course check the response from the server after your post/put to see if it was successful, or if you need to add a generated id to some data.

Doing it this way you get the best of two worlds.

[H14]

Indeed, invalidating the data caused the data to be completely refreshed (with some visible delay) on all edits. I thought that was the intention, but that the optimistic updates were mainly meant to mask the fact that there was a delay on this reload. But that is not the case, then.

So what is the best way to do this? Put the data in a store and do the operations directly on the store?

How do I prevent the automatic invalidation of the __data.json at a page endpoint? With the form enhance from the todo example, the data is automatically retrieved each time. If I POST to other endpoints, it does not.

Thanks!