Sveltekit 和 SSR

Question

我需要一些帮助来理解 sveltekit 上下文中的 SSR。我注意到在服务器和客户端上都调用了 load 方法，我无法解决这个问题。我猜是需要初始化客户端组件的状态，但为什么不直接将 SSR 产生的 props 传递给客户端呢？

如果在SSR期间需要做数据库请求怎么办？现在从客户端重复相同的数据库请求？如果那甚至不可能怎么办？我知道我可以在服务器和浏览器中使用 browser 从 $app/env 到运行不同的代码，但是我 return 有什么用？有什么方法可以将数据从 load 的服务器端调用传递到客户端调用？

Answer 1

why not just pass the props resulting from the SSR to the client?

为此，道具需要可序列化。你不能——例如——做这样的事情：

<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>

或者您可能需要在一种情况下动态导入一个组件，在另一种情况下动态导入不同的组件，然后将其作为 prop 传递。

序列化 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。但这并不意味着您正在发出不必要的网络请求。 load 函数中 fetch 的任何内容都被烘焙到服务器呈现的 HTML 中，这意味着 a) 所有内容都包含在一个请求中，b) 用于服务器和客户端呈现的数据得到保证为了保持一致，并且 c) 由于 gzip（或 brotli），出现在获取的数据中以及出现在标记中的任何字符串本质上都是 'free'。

What if a database request needs to be done during SSR?

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

Sveltekit 和 SSR

Sveltekit and SSR

server-side-rendering

svelte

sveltekit