Why not call a fetch function eagerly when it is not even awaited

Question

I get this message in my terminal when running my svelte frontend:

Avoid calling fetch eagerly during server side rendering — put your fetch calls inside onMount or a load function instead

I understand what it says and I can definitely put it in an onMount function, however, I don't see the meaning of it. Imagine this example application, that is close to how I use it:

<script lang="ts">
  let response: Promise<string> = $state(loadData());

  async function loadData(): Promise<string> {
     const response = await fetch("http://my_endpoint");
     return response.json();
  }
</script>

{#await response}
  LOADING
{:then response}
  {response}
{/await}

What I am trying to point at is that the async function loadData is not awaited in the script tag. Only via the await directive in the template. I don't see how this could be blocking more than any other normal function call. I wonder if that is just a case that was overlooked when programming this warning or if I create a real mistake that will bite me in the ass in a larger project.

Aru · Accepted Answer · 2025-07-12 19:12:54Z

As of per my understanding:
I believe that is per svelte definition, that a fetch inside the top-level script runs immediately during SSR with svelte, which is why the warning appears. It doesnt seem to have anything to do with actually awaiting it.

(AI cofirms this with answering:
In Svelte (and especially SvelteKit), the top-level script runs both on the server during SSR and in the browser. So if you call fetch directly at the top level of your component script, it executes immediately during SSR.
)

To avoid that you would need to, as the warning itself sais, either:
move the fetch logic to onMount() -> for client-only fetching or move the fetch logic to page-level load function for SSR (SvelteKit as per your tag this should be the better solution)

according to AI:

Using onMount means the data fetch happens only in the browser after hydration.
Using load means data is fetched before rendering, but in a controlled, framework-aware way.

Collectives™ on Stack Overflow

Why not call a fetch function eagerly when it is not even awaited

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related