Spurious/outdated warning with async SSR

[dangodai]

Describe the bug

SvelteKit has the following warning (source):

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

While I'm not certain about the original context this warning was added under, I'm assuming it was because the fetch result would simply be lost during SSR, resulting in a wasted call.

With async SSR I don't believe this warning should be emitted as long as the fetch called is awaited.

If I've misunderstand then perhaps some additional clarification on the purpose of the warning is needed.

Reproduction

1. Enable async svelte
2. Call await fetch(...)
3. Observe the warning during SSR

Logs

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 6.93 GB / 15.54 GB
    Container: Yes
    Shell: 5.3.3 - /bin/bash
  Binaries:
    Node: 22.17.0 - /home/yung/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - /home/yung/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.13.1 - /home/yung/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 139.0.7258.66
    Firefox: 141.0
    Firefox Developer Edition: 141.0
  npmPackages:
    @sveltejs/adapter-auto: ^6.0.0 => 6.1.0 
    @sveltejs/kit: ^2.43.8 => 2.43.8 
    @sveltejs/package: ^2.0.0 => 2.5.1 
    @sveltejs/vite-plugin-svelte: ^6.0.0 => 6.2.0 
    svelte: ^5.39.9 => 5.39.9 
    vite: ^7.0.4 => 7.1.5

Severity

annoyance

Additional Information

No response

[dummdidumm]

Fixed when called within remote functions by #14610

For everything else we need to look into it still (though during SSR some kind of warning would still be good since the result will be refetched on hydration

[dangodai]

Sorry, yes, I meant outside of remote functions (though good to know it's been addressed within them).

I can see the warning being useful for someone not expecting a double fetch, but for anyone else doing it intentionally it's annoying to have your console fill up with warnings that aren't relevant.

[dummdidumm]

In which case are you doing a fetch that also happens during SSR and know that it's not double-fetching? If you do this

<script>
  const result = await fetch('/somewhere');
</script>

{result}

Then you will have a double fetch. Once during SSR, and then once again on the client during hydration. There's no way for Svelte(Kit) to have the result accessible anywhere. Remote functions / load functions / soon Svelte's built-in resource-method have this, but not regular fetch.

To me it sounds like the warning is correct in your case.

[dangodai]

To clarify, I'm aware that it's double fetching. I don't think that's an inherent problem though, and there isn't a 1:1 alternative we can use ATM to fix this warning.

Consider the setup of 1) using async svelte to create components responsible for their own loading, 2) using a third party API.

Using load functions defeats the purpose of (1), as the components lose their portability and become dependent on the page (among other losses). Using remote functions for (2) creates an unnecessary proxy through your SK deployment during client side rendering which introduces extra latency, and creates a dependency on having a SK server meaning you can't optionally create a static deployment.

If the coming resource API allows for hydration using the fetch result from the server, without creating a hard dependency on the server, then I would certainly use that.

---

Aside from the above discussion, the warning was written pre-async svelte where it wasn't possible to wait for and use the fetch result on the server. That's no longer the case. The phrasing suggests to me it was more about not being able to use the fetch result on the server than it was about double fetching.

In fact, just thought about this, if you are in a export const ssr = true and export const csr = false environment you will still get this warning despite no double fetching. So the warning is definitely incorrect there.

[exentrich]

Recently Svelte introduced hydratable - as solution to overcome double fetch. Please consider removing this warning message or at least detect that hydratable is used and not show it.

[Conduitry]

SvelteKit does not yet use hydratables for remote functions - that is coming soon in #14872. We should keep the warning at least until then.

[exentrich]

I’m using hydratables to build a custom data-fetching library without remote functions, and this warning suggests I’m doing something wrong, even though that doesn’t seem to be the case. I hope the warning can be removed for scenarios like this.

[dangodai]

Aside from @exentrich 's problem, hydratable solves this issue generally, although I believe the following edge case is still an issue:

If you are in a export const ssr = true and export const csr = false environment you will still get this warning despite no double fetching. So the warning is definitely incorrect there.