What's the difference between server-side and client-side load function? & Purpose of $lib/server/*

[The-LukeZ]

I know that there is a +page.server.js file which can export a load function - is that the server-side load function?
If so, what is the purpose of the server directory in $lib ?

And is the onMount function the "client-side load function"?

[brunnerh]

I know that there is a +page.server.js file which can export a load function - is that the server-side load function?

Yes.

If so, what is the purpose of the server directory in $lib ?

I am not aware of any directory within $lib having a special function. If there is such a directory, it might be just for organizational purposes (there e.g. are restrictions on access to environment variables, so splitting files between client and server can make sense).

And is the onMount function the "client-side load function"?

No. Anything in onMount is simply executed when the component mounts, this does not need to have anything to do with loading either.

There are no strictly client-side load functions. There are "universal" load functions in +page.js/.ts which are called on the client and server, depending on whether it's a first time load or a client-side navigation/refresh due to invalidation. If server-side rendering is disabled, the function de-facto becomes a client-side load function.

[The-LukeZ]

Ah okay, interesting... Well when you create a new project it somehow automatically created a `server` directory in the lib folder... But, if it has so special meaning then I'm going to just delete it 👌🏻 Thank you ^^

[brunnerh]

npx sv create does not add such a directory by default.