SvelteKit 在服务器上获取并更新可写存储

Question

我想知道在 SvelteKit 中获取数据的最佳方法是什么，因为我在我的应用程序上遇到了以下问题。

我有一个可写商店，如下所示：

如您所见，我的商店没有初始值。然后在“+page.server.js”文件上执行数据获取逻辑：

然后，我循环查看商店中的待办事项并显示项目列表。问题是，在浏览器上第一次渲染时，我收到以下错误：

这有点道理，因为商店没有初始值。然后，我决定将存储的原始值更改为空数组（因为获取的数据进入数组），如下所示：

当我进行此更改时，UI 以正确的状态呈现（todos 存储已获取数据），不久之后，数据消失，我得到一个空数组。

这是 SvelteKit 的预期行为吗？如果我需要在服务器上获取数据，正确的数据获取方法是什么（我在数据库调用上有 API 密钥，所以我无法在客户端上获取数据，因为 Vite 会抛出错误）。

Answer 1

这是由于对 SvelteKit 工作原理的误解造成的。

简而言之，页面在服务器 (SSR) 上呈现，标记以及包含返回数据的有效负载load发送到客户端。为了添加所有交互性和事物，客户端将使用接收到的数据“水合”页面，这意味着它将重建页面，但保留已存在的部分。这样做的一个副作用是，在服务器上渲染但客户端未渲染的任何内容都会闪烁，因为它首先在那里，然后就不再出现了。

这如何适用于您的案例？好吧，简单来说，服务器和客户端之间没有共享状态，唯一传递的东西是从函数返回的内容load，因此当您填充商店服务器端时，它仍然是空的客户端。

正如另一个答案也所说，解决方案是将您的待办事项作为来自加载函数的数据传递，然后在客户端上用它初始化存储：

export let data; // data comes from load
todoStore.set(data.todos)

最后一点，值得一提的是，虽然您的存储不在客户端和服务器之间共享，但它将在对服务器的不同请求之间共享，这意味着像在代码中一样使用全局存储存在从一个泄漏内容的巨大风险用户到另一个，我会在闪烁中看到商店中根据您的请求提供的内容。