Why is setting a store value in load function bad?

Per the sveltekit documentation and the tutorial, it says, "You may be tempted to do this," and then it shows an example of a store value being set inside a load function on your +page.js. It goes on to say that value will be available to all users, and that has confused me.

My particular application needs are solved mosts conveniently by setting a store's value in the +layout.js file, and then dozens of small components reference that store's values instead of always having to every time I use and re-use these components.

I am just confused how setting the store value in the load function on the client side would impact all the users. It reads confusing.

Can someone explain what they mean?
Thanks.

Comments

[José Pablo Ramírez Vargas]

I think it is because +page.js also runs server-side.

[Jim Nayzium]

If we wrap it in a if (browser) though, then it won't run on the server-side, right?

I guess what confuses me is it says that the store values set in the load functions will be available to all users. So like if I set the store value of myStore.set("My Info"); then the user logged in who trigger something to set it as "User1 Info" will then cause USER2 to see his/her value of the same store as "User1 Info" instead of "User2 Info"? That's what has me confused.

[José Pablo Ramírez Vargas]

This is a regular JS module:

export const x = 1;

Any code importing x will get the same x: x is a singleton. In browsers, singletons belong to just one user as only one user can use a browser at the same time.

Sveltekit works by running the same code browsers run, but in Node.js. The above module also exports a singleton in Node.js. The difference: It is the same Node.js but for many users. Now multiple users use the same singleton. The lesson: Don't use singletons to store per-user data as data from one user will override the data from another user.

Still don't see it? Transform the code above:

import { writable } from 'svelte';

export const x = writable();

It is the same export as before (x is a singleton), just that x is initialized with a call to Svelte's writable function. It should now be obvious that the store is shared among users.

[Jim Nayzium]

It should now be obvious that the store is shared among users.

Here you mean "If I set the value of the store inside the load function it will then be shared amount users." right?

So my question remains, if we are in a load function and wrap it in the if (browser) login inside the load function, will it still change the global value for multiple users even if it only runs in the browser?

[José Pablo Ramírez Vargas]

I limited myself to explain the mechanics of the issue. Now do whatever you want to do. if (browser) should skip, but then if the page runs server side you won't get what you need. Up to you. Do your testing. Just have this issue in the back of your head.