Sveltekit和SSR

Question

我需要一点帮助，了解SSR背景下的sveltekit。我注意到，load方法在服务器和客户端都被调用，我不能把头绕在这上面。我想需要初始化客户端组件的状态，但是为什么不直接将SSR产生的支持传递给客户端呢？

如果需要在SSR期间执行数据库请求，怎么办？现在客户端重复相同的数据库请求了吗？如果这是不可能的呢？我知道我可以使用来自browser的$app/env在服务器和浏览器上运行不同的代码，但是我应该返回哪些支持呢？有任何方法将数据从服务器端的load调用传递到客户端调用吗？

Answer 1

为什么不直接把由SSR产生的道具传递给客户？

为了做到这一点，道具需要可串行化。例如，你不能做这样的事情：

<script context="module">
  export async function load({ fetch }) {
    const data = await fetch('/data.json').then(r => r.json());
    const model = create_model(data);

    return {
      props: { model }
    };
  }
</script>

<script>
  export let model;
</script>

<h1>{$model.title}</h1>

或者，您可能需要在一种情况下动态导入一个组件，而在另一种情况下则需要导入另一个组件，并将其作为支柱传递。

序列化load输出还有另一个缺点(这就是SvelteKit的前身Sapper所发生的情况)--在某些情况下，您可能会序列化比您需要的更多的数据：

<script context="module">
  export async function load({ fetch }) {
    const compressed = await fetch('/compressed-data.json').then(r => r.json());
    const data = decompress(compressed);

    return {
      props: { data }
    };
  }
</script>

因此，SvelteKit在服务器和客户端上运行load。但这并不意味着你提出了不必要的网络请求。您在fetch函数中使用的任何内容都会保存到服务器呈现的load中，这意味着( a)所有内容都包含在一个请求中，b)用于服务器和客户端呈现的数据保证是一致的，并且c)由于gzip (或brotli)的存在，出现在获取的数据中并出现在标记中的任何字符串基本上都是‘空闲的’。

如果需要在

期间执行数据库请求，怎么办？

您不应该直接与load中的数据库对话，您应该创建一个端点并使用fetch请求数据。(我们将来可能会添加一种自动生成这些端点的方法，但它目前不在路线图上。)