SvelteKit stores don't match client-side and server-side

Question

In SvelteKit, it seems that stores do not sync between the client-side and server-side. In other words, if one modifies a store on the client-side, when it is retrieved on the server-side, it will not be modified, and vice versa.

You can see this behaviour in the minimal reproducible example below:

https://stackblitz.com/edit/sveltejs-kit-template-default-fpp2y8?file=src/routes/+page.svelte

My question is: What is the idiomatic, or normal way to modify a server-side store when on the client-side?

To avoid the XY Problem, what I am trying to do specifically is the following:

The user of an EPOS system has a 'currentSale' store, which is loaded on accessing the /epos route on the server-side, specifically so that Prisma can get more information about the products, customer attached etc.

However, the problem arises when, for example, the user tries to increment the quantity of a product in the EPOS sale. Trying to update the store does not work, as it doesn't save server-side. And using a whole API route, or form action seems overkill and not optimized/optimal.

Answer 1

You should not try to use stores on the server in the first place; they are not meant for that.

And using a whole API route, or form action seems overkill and not optimized/optimal.

That is exactly what you should be using when you want to modify data on the server. I am not a fan of API routes as they are quite limited and verbose, but form actions are quite versatile as multiple named actions can exist for the same page.