SvelteKit中Store数据短暂显示后消失的问题求助

你的问题核心是服务器端设置的Store无法同步到客户端，导致页面SSR时能渲染数据，但客户端hydration完成后，Store被重置为初始值，页面变成空白。

原因说明 #

SvelteKit的服务器端和客户端是独立运行的，你在+page.server.js的load里设置的Store是服务器端的实例，客户端初始化时会重新创建Store实例并使用你定义的初始值（空值），所以hydration后页面数据被清空。

修复步骤 #

1. 修改+page.server.js，返回查询数据而非直接设置Store

// +page.server.js
import { supabase } from '$lib/supabase';

export async function load({ params }) {
  const { data: treatment, error } = await supabase
    .from('treatments')
    .select('uuid, name')
    .eq('uuid', params.treatmentId) // 替换为你的实际路由参数名
    .single();

  // 将数据和错误返回给页面
  return { treatment, error };
}

2. 在+page.svelte中接收数据并更新客户端Store

<script>
  import { page } from '$app/stores';
  import { treatment_uuid, treatment_name, error } from '$lib/stores/treatment.js';

  // 监听页面数据变化，同步更新客户端Store
  $: if ($page.data.treatment) {
    treatment_uuid.set($page.data.treatment.uuid);
    treatment_name.set($page.data.treatment.name);
  }

  $: if ($page.data.error) {
    error.set($page.data.error);
  }
</script>

<!-- 页面渲染逻辑 -->
<div>
  {#if $treatment_uuid}
    <p>UUID: {$treatment_uuid}</p>
    <p>名称: {$treatment_name}</p>
  {:else if $error}
    <p>错误: {$error.message}</p>
  {:else}
    <p>加载中...</p>
  {/if}
</div>

3. 确认Store初始值（可选）

确保treatment.js中的Store初始值符合预期：

// treatment.js
import { writable } from 'svelte/store';

export const treatment_uuid = writable('');
export const treatment_name = writable('');
export const error = writable(null);

简化方案（如果仅当前页面使用数据） #

如果不需要在多个组件间共享这些数据，直接使用$page.data渲染更简单，无需额外维护Store：

<script>
  import { page } from '$app/stores';
</script>

<div>
  {#if $page.data.treatment}
    <p>UUID: {$page.data.treatment.uuid}</p>
    <p>名称: {$page.data.treatment.name}</p>
  {:else if $page.data.error}
    <p>错误: {$page.data.error.message}</p>
  {:else}
    <p>加载中...</p>
  {/if}
</div>

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