There was a runtime-difference between using $page.data vs export let data: PageData but I forgot

[205g0]

Faced this few times in the past but have totally forgotten what it was, so happy if anyone remembers

[geoffrich]

$page.data contains the combined output of all load functions that ran for the given request.
export let data only contains the output of the load function for that page/layout as well as parent load functions. It does not contain the result of any child load functions.

Let's say you navigate to /books/fantasy/31 and run the following load functions:

// /books/+layout.server.js
export function load() {
  return { totalBooks: 311 }
}

// /books/fantasy/+layout.server.js
export function load() {
  return { genreBooks: 56 }
}

// /books/fantasy/[bookId]/+page.server.js
export function load() {
  return { title: 'The Color of Magic' }
}

For all components, the value of $page.data would be:

{
  totalBooks: 311,
  genreBooks: 56,
  title: 'The Color of Magic'
}

But the value of the export let data prop would depend on the component.

// /books/+layout.svelte
export let data = { totalBooks: 311 }

// /books/fantasy/+layout.svelte
export let data = { totalBooks: 311, genreBooks: 56 }

// /books/fantasy/[bookId]/+page.svelte
export let data = { totalBooks: 311, genreBooks: 56, title: 'The Color of Magic' }

Note how the data prop in /books/fantasy/+layout.svelte contains the result of the load functions for /books and /books/fantasy, but not the result of the load function for /books/fantasy/[bookId]

The benefit of using the data prop is that SvelteKit can statically determine the types and you get autocomplete in your IDE. $page.data will contain all the data but needs to be manually typed (since it can be used anywhere)

For more, see the documentation for $page.data.