Streamed promises for universal load functions?

[aradalvand]

Describe the problem

Apparently streamed promises only work in +page.server.js load functions. If you return a nested promise in a universal (+page.js) load function, the promise will simply be recreated on the client-side (i.e. in the browser).

Correct me if I'm wrong, but it seems like the benefis that streamed promises offer in theory — which were mentioned in this blog post — aren't limited to server load functions:

There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from load and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don’t start fetching until the client renders, and you’re also having to break SvelteKit’s load convention.

(emphasis mine)

Both of the aforementioned shortcomings that streamed promises are meant to rectify would also apply in the context of +page.js load functions.

Describe the proposed solution

Support streamed promises for +page.js load functions.
When a +page.js load function is being executed on the server, the nested promises would behave similarly to +page.server.js load functions, and when the +page.js load function is being executed on the client (e.g. during client-side navigation), the promises would simply be created on the client.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[dummdidumm]

The problem here is that this would need special handling for the initial hydration phase. Universal load functions are replayed on the client. Only the fetches they do are recorded, but not their return types which enables them to also return non-serializable data.
Adding a feature like this would mean we would need to keep track of all nested fetch requests, some of which might only happen on the client (because people could use if (browser) .. inside load functions) and then determining which of those fetch responses to await from the server. It sounds like an "easy enhancement" on the surface but really isn't because of the ways in which the universal load function can be used. I doubt we will ever implement this.

[pjebs]

This seems to work for me. @aradalvand Is there something I am misunderstanding? I don't have a server load function.

File: +page.ts:

import type { PageLoad } from './$types';

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export const load: PageLoad = async ({ data, params, route }) => {
    const getQuote = async () => {
        await delay(5000);
        return "The only way to do great work is to love what you do. - Steve Jobs";
    };
    
    return {
       quote:  getQuote(),
    };
};

File: +page.svelte:

<script lang="ts">
import type { PageProps } from './$types';


let { data }: PageProps = $props();
</script>

<h1>Welcome to SvelteKit</h1>


<a href="/about">Go forward</a>

{#await data.quote}
	<p class="quote placeholder">Loading inspiring quote<span class="loading-dots"></span></p>
{:then quote}
	<p class="quote">{quote}</p>
{:catch error}
	<p class="quote error">Failed to load quote: {error.message}</p>
{/await}

[pjebs]

@dummdidumm

"The promise will simply be recreated on the client-side...".

Is that what is happening here? It seems to work perfectly.