Svelte SSR中fetch未被await仍触发警告的原因咨询

这个警告不是误判，得从Svelte服务端渲染（SSR）的执行逻辑说起，你的写法确实存在问题，尤其是在大型项目里隐患会被放大。

核心原因：SSR时组件脚本会在服务器执行 #

当开启SSR时，Svelte会先在服务器上运行组件的<script>代码，用来生成完整的HTML返回给客户端。你现在直接在脚本里调用loadData()，意味着服务器执行组件初始化时就会立刻发起fetch请求——哪怕你没写await，请求也已经发出去了。

这种写法的问题在哪？ #

1. 请求上下文丢失
   服务器端的fetch和浏览器环境完全不同：没有用户的Cookie、请求头里的UA/身份信息，甚至连请求的域名、端口都可能和客户端不一致。直接发起请求大概率会拿到错误数据（比如未登录状态），导致服务器生成的HTML和客户端最终渲染的内容不一致，触发 hydration 错误。

2. 失去SSR的意义
   SSR本来是为了把渲染好的页面发给客户端，避免用户看到加载态。但你这种写法里，服务器执行脚本时无法等待fetch完成（因为你没在脚本里await，框架也追踪不到这个异步请求），生成的HTML还是“LOADING”状态，等于白做了SSR。

3. 服务器资源浪费
   如果多个组件都这么写，服务器会同时发起大量无意义的并发请求，拖慢服务响应速度，甚至可能触发接口的限流机制。

你觉得“没await就不阻塞”的误区 #

虽然你没在脚本里写await，但loadData()调用时会立刻触发fetch，服务器端执行这段代码时，请求已经发出去了。而且SSR时组件的初始化逻辑是同步走完的，框架无法感知这个异步请求的状态，自然无法等待它完成后再生成HTML。

正确的两种写法 #

1. 仅客户端加载：用onMount

如果不需要SSR渲染数据，只在客户端加载，把fetch放到onMount里——这个钩子只会在客户端组件挂载后执行，服务器端不会触发：

<script lang="ts">
  import { onMount } from 'svelte';
  let response: string | null = null;

  onMount(async () => {
    const res = await fetch("http://my_endpoint");
    response = await res.json();
  });
</script>

{#if response}
  {response}
{:else}
  LOADING
{/if}

2. 支持SSR：用load函数（推荐）

如果要利用SSR提前渲染数据，按照Svelte的规范用load函数：

• 路由组件：在+page.server.ts（服务器端执行）或+page.ts（客户端/服务器端都可）里写：

// +page.server.ts
export async function load({ fetch }) {
  const res = await fetch("http://my_endpoint");
  const data = await res.json();
  return { data };
}

然后在页面组件里接收数据：

<script lang="ts">
  export let data: string;
</script>

{data}

这种方式下，服务器会先执行load拿到数据，再生成包含数据的HTML，客户端 hydration 时直接复用数据，不会重复请求。

• 普通组件：Svelte 4+支持组件级load函数，写法类似：

<script lang="ts">
  export async function load({ fetch }) {
    const res = await fetch("http://my_endpoint");
    return { data: await res.json() };
  }

  export let data: string;
</script>

{data}

总结 #

你的写法会导致SSR期间发起无上下文的fetch请求，带来数据不一致、资源浪费等问题，大型项目里这些问题会被放大。建议按照Svelte的规范，把fetch放到onMount（仅客户端）或者load函数（支持SSR）里。

内容的提问来源于stack exchange，提问作者TheCommoner282