Feature Request: make data in +page.ts a function that lazily load data from the server

[paoloricciuti]

Describe the problem

Today the data argument we get in the universal load function is eagerly evaluated

kit/packages/kit/src/runtime/client/client.js

Line 2450 in 94c45b9

const res = await native_fetch(data_url.href);

this is mostly fine but it would be cool if instead we could lazily load the server data in the universal load function in case we don't need it.

What this would allow is having the ability to cache something client side and have the server load function be invoked only if we don't have client data...something like this eg.

let cached_data;

export async function load({ data }){
    cached_data ??= await data();
    return {
        ...cached_data,
    };
}

this would basically prevent a trip to the server for data that we might know it's already in the client.

Describe the proposed solution

Turn data in a function so that the user can call that lazily. Obviously in case we don't have an universal load function we should just call it ourselves to pass data to the component.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[Rich-Harris]

We would need to be careful to avoid making multiple requests unnecessarily, in the case that more than one +layout.js/+page.js did await data() (at least if they do it synchronously).

I suspect we'll want to rename the property to make it clearer — something like this:

let data;

export async function load({ server }) {
  data ??= await server();
  // ...
}

Curious to better understand use cases though. The caching thing feels like a dangerous pattern, caching being what it is. Maybe there's an XY problem here?

[paoloricciuti]

Curious to better understand use cases though. The caching thing feels like a dangerous pattern, caching being what it is. Maybe there's an XY problem here?

I think in general nowadays there's no way to prevent a client side navigation from reaching to the server if there's a server load function...i think having that power could unlock more patterns (caching being one...obviously it's hard to make it right but currently it's simply not possible).

We would need to be careful to avoid making multiple requests unnecessarily, in the case that more than one +layout.js/+page.js did await data() (at least if they do it synchronously).

I guess we should apply the same regards that we do for parent right?

[paoloricciuti]

We would need to be careful to avoid making multiple requests unnecessarily, in the case that more than one +layout.js/+page.js did await data() (at least if they do it synchronously).

@Rich-Harris i was thinking about this...since today we are awaiting every data and data only include the return value from the respective server function...if instead of awaiting the fetch call on our end we let users await it in their load function shouldn't this make things faster no matter what?

Are you worried of the case where they await data() after another lengthy await?