如何在SvelteKit中用响应式语句从+server.js获取数据？

问题原因 #

你遇到的错误是因为SvelteKit默认会对页面进行服务器端渲染（SSR），在服务器环境中使用相对URL调用fetch时，无法解析完整的请求地址（服务器不知道客户端的域名）。而把响应式语句$:放在onMount里会触发警告，是因为$:只能在组件的顶级作用域生效，且onMount仅在组件挂载时执行一次，无法响应subject的变化。

解决方案 #

下面提供几种可行的实现方式，既避免SSR报错，又保持响应式：

方法一：结合browser环境判断的响应式语句

利用SvelteKit提供的browser变量判断当前是否在客户端环境，确保fetch仅在客户端执行，同时通过$:响应subject的变化：

<script>
  import { browser } from '$app/environment';
  let subject = "Svelte";
  let message = "";

  // 仅在客户端执行，且subject变化时重新请求
  $: if (browser) {
    fetch(`/api/?subject=${subject}`)
      .then(res => res.json())
      .then(data => message = data.message);
  }
</script>

<input bind:value={subject} />
{message}

方法二：封装成响应式函数（推荐，更易维护）

将请求逻辑封装成独立函数，通过响应式语句触发调用，同时增加错误处理和加载状态：

<script>
  import { browser } from '$app/environment';
  let subject = "Svelte";
  let message = "";
  let loading = false;
  let error = null;

  async function fetchMessage(currentSubject) {
    if (!browser) return;
    
    loading = true;
    error = null;
    try {
      const response = await fetch(`/api/?subject=${currentSubject}`);
      if (!response.ok) throw new Error('请求失败，请稍后重试');
      
      const data = await response.json();
      message = data.message;
    } catch (err) {
      error = err.message;
    } finally {
      loading = false;
    }
  }

  // 初始加载 + subject变化时重新调用
  $: fetchMessage(subject);
</script>

<input bind:value={subject} disabled={loading} />

{#if loading}
  <p>加载中...</p>
{/if}

{#if error}
  <p style="color: #dc2626;">{error}</p>
{/if}

{message}

关键说明 #

• browser变量：SvelteKit内置的环境变量，true表示当前在客户端浏览器环境，false表示在服务器端，用它可以避免SSR时执行客户端专属代码。
• 响应式语句$:：放在组件顶级作用域时，会在依赖变量（这里是subject）变化时自动执行，保证数据的响应式更新。

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