Loading data only once in Svelte Kit and when to use page.js vs layout.js for loading data

I have two questions related to SvelteKit, the first one is:

1. How to load data only on the first page load?

I'm currently loading some global data from my layout.js file, such as user information. Since I'm using client side routing, this should only need to be loaded on the first page load, and not on each navigation which it seems to be doing now.

layout.js

import { api } from '$lib/api';

export const prerender = true;

/** 
 * @type {import('./$types').LayoutLoad}
 * @return {Promise<Record<string,[]|string>>}
 */
export async function load({ fetch, params }) {
    // ...

    const [userRes] = await Promise.all([
        api.get(fetch, `/user`),
	]);

    return {
        user: userRes.status === 200 ? await userRes.json() : [],
    }
}

Is there an alternative to this, which would only run on the first page load?

2. When to use layout.js vs page.js, does it impact performance?

Currently I'm loading the global data in layout.js, and I'm loading the individual page data in page.js. Does this have any impact on performance? Does page.js run after layout.js? In that case, if SSR is disabled, the page should load faster if the page data is also loaded as an asynchronous API call together with the other API calls?

Is there are reason that not all data should be loaded in the same file, or does it impact performance at all? Would appreciate any input and information on that part.

Question 1

As far as I know, as long as the layout isn't re-rendered, it shouldn't execute the load function. I can't seem to reproduce the issue of the load function running every page navigation except when there are (group) layouts are involved.
Here's an example: Stackblitz App

Then again, if the +layout.js file is moved to the root directory, the load function won't be run again.

Question 2

While we're at it, the difference between +page.js and +layout.js is that +layout.js runs when the +layout.svelte is being rendered, so does page.js with it's respective +page.svelte. They follow their .svelte parent and only run when that component is being rendered.

> Currently I'm loading the global data in layout.js, and I'm loading the individual page data in page.js

Yes, this is how I would typically use +page.js and +layout.js. To be clear, it's not "global" per se, since only pages that uses the specific layout has that data.

>Does page.js run after layout.js?

So yes, in most cases +page.js will run after +layout.js is done. You can also see that example in the Stackblitz app above.

> In that case, if SSR is disabled, the page should load faster if the page data is also loaded as an asynchronous API call together with the other API calls?

This I'm not to sure, in theory, it should be, but then again it depends on how long the API calls take

This was my input/information to your questions, I will definitely have something incorrect and if I do answer something incorrectly, please comment below so I can correct it.