SvelteKit服务端取数更新可写存储的问题求助

为什么数据会消失？ #

这是SvelteKit服务端与客户端环境隔离导致的预期行为：

• 服务端执行load函数时，更新的是服务端内存里的store实例；
• 客户端加载应用时，会重新初始化store（使用你设置的空数组初始值），服务端的store状态不会同步到客户端，所以hydration完成后数据会被重置为空数组。

而最初的{#each}报错，是因为store初始值为undefined，{#each}无法遍历非数组类型。

正确的服务端数据获取方式 #

SvelteKit的设计思路是通过load函数将服务端数据传递到客户端，而非直接在服务端修改客户端store。具体步骤如下：

1. 修改+page.server.js的load函数，直接返回数据

去掉通过getTodos更新store的逻辑，在load里完成数据查询并返回：

export async function load() {
  // 服务端查询数据库
  const todos = await db.collection("ToDo").find().toArray();
  // 序列化处理MongoDB的_id字段
  const serializedTodos = todos.map(({ _id, ...rest }) => ({
    ...rest,
    id: _id.toString()
  }));
  // 将数据返回给页面组件
  return { todos: serializedTodos };
}

2. 在页面组件中接收数据并使用

在+page.svelte里，SvelteKit会自动把load返回的数据注入到data变量中，你可以直接用它渲染列表，也可以同步到全局store供其他组件使用：

<script>
  // 自动接收load返回的数据
  export let data;
  import { todosStore } from '$lib/stores';

  // 如果需要全局共享数据，在客户端初始化store
  todosStore.set(data.todos);
</script>

<!-- 直接用data.todos渲染列表，避免store初始值问题 -->
{#each data.todos as todo (todo.id)}
  <div>{todo.title}</div>
{/each}

3. 全局共享数据的进阶方案

如果多个页面需要使用todos数据，可以把数据逻辑放到根布局中：

• 创建+layout.server.js：

export async function load() {
  const todos = await db.collection("ToDo").find().toArray();
  const serializedTodos = todos.map(({ _id, ...rest }) => ({
    ...rest,
    id: _id.toString()
  }));
  return { todos: serializedTodos };
}

• 在+layout.svelte中同步到store：

<script>
  export let data;
  import { todosStore } from '$lib/stores';
  todosStore.set(data.todos);
</script>

<!-- 布局内容，子页面会继承此数据 -->
<slot />

这样所有子页面都能通过store访问到todos数据，同时页面初始渲染时就有正确的数组初始值，不会触发{#each}报错。

核心原则 #

• 服务端load函数的职责是获取数据并返回，而非直接操作客户端状态；
• 客户端状态（比如store）的初始化应该基于客户端接收到的load数据，避免服务端与客户端状态不一致。

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