Why use export let data when $page.data can do the same?

[hanszoons]

I usually use exported data to build +page.svelte and $page.data within components (or when I want to bring up something about deeper routes). But sometimes I use $page.data everywhere, including in the place of exported data.

The two are not the same, but in the end you can also just do everything with $page.data, what exactly is the (better) use case for exported data?

I'm probably missing some important nuance, but I can't really find it in the docs.

[xpertekShaun]

If you use $page.data, you dont get type completion of your load function in the editor

But you do if you use export let data: PageData in your +page.svelte file, you do

Its a convenience for us, the developers, functionally.. there is not much difference between the 2. $page is a store, so it can be called deep inside components without prop drilling, so generally to make your life easier, use $page when you are in components, and export let data:PageData when you are in a +page.svelte file.

[david-plugge]

$page.data types can be set inside src/app.d.ts the types defined there should be globally available (either by returning from the root layout or by every single page load). Therefore you probably want to use $page.data for global data only.

[vekunz]

export let data is much easier to mock inside unit tests than $page.

[charisra]

Followup up on this useful thread, if I have a +page.ts, a +page.svelte and +layout.svelte all in the same folder (with no +layout.server.ts, is it valid to do:
export let data:PageData inside +layout.svelte ?

[david-plugge]

I'm pretty sure it's not but you can just create a project and take a look at the data inside the page and layout

[charisra]

I have tested on a project. Since there is no +layout.server.ts the types of the data seem to be correct, meaning since layout is loading from page, the types match. But I'm asking (if anyone knows) if this is a valid approach/good practice.

[cdcarson]

@charisra I'd use the LayoutData type instead to prevent confusion later on if you do add +page|+layout.server loads. This is generated alongside PageData in ./$types.js.