[Documentation] Clarification of using load() with adapter-static

[jmp-12]

Describe the problem

As per the sveltekit docs, I have non-essential data that should be loaded after the page is rendered.

Given the following page load function:

+page.ts

export async function load({ fetch }) {
  async function fetchData() {
    const response = await fetch("https://dummyjson.com/quotes/random/?delay=3000");
    return await response.json();
  }

  return {
    quote: await fetchData()
  };
}

and the following page:

+page.svelte

<script lang="ts">
  let props = $props();
</script>

<h1 class="text-xl">
  { JSON.stringify(props.data) }
</h1>

<h2 class="text-xl">
  {#await props.data.quote}
    Loading quote...
  {:then quote}
    Quote: {JSON.stringify(quote)}
  {:catch error}
    <p>Error loading quote: {error.message}</p>
  {/await}
</h2>

waits for the promise to return before rendering the page using npm run dev, npm run preview, and npx http-server ./build.

Unrelated to my main concern, I'm not sure why this is the case with npx http-server, I see the data serialized in index.html as expected but the page still waits until the fetch request completes before loading the page. I've set export const prerender = true in the root +layout.ts with no errors in the console during build.

Removing the await in the +page.ts return object provides the expected behavior. No data is serialized in index.html during build and the page loads instantaneously in all the above environments, replacing the "Loading..." text with the data when the fetch resolves.

The docs and blog post seem to suggest this is part of promise streaming; however, those pages mention server load functions almost exclusively. Additionally, there's a note in the docs that says:

Streaming data will only work when JavaScript is enabled. You should avoid returning promises from a universal load function if the page is server rendered, as these are not streamed — instead, the promise is recreated when the function reruns in the browser.

Describe the proposed solution

I would like clarification in the docs for returning promises in load() function using adapter-static. It seems like the approach I'm using is more idiomatic than calling fetch in the the page itself. Plus, I really like the preload on hover behavior.

Alternatives considered

N/A

Importance

nice to have

Additional Information

Relevant package versions:

"@sveltejs/kit": "2.5.27"
"svelte": "5.0.0-next.246"

[eltigerchino]

In your case where the server is disabled, the load function in +page.ts only runs on the client, so the fetch occurs in the browser when the page is navigated to. This is not streaming. In contrast, server load functions initiate the fetch on the server and stream data to the browser when a promise is returned.