如何在 SvelteKit 中使用 SSR 从服务器传递数据？

Question

我习惯于将 Express 与模板引擎一起使用，例如 Handlebars。我想开始使用 Svelte 和 SvelteKit，但我不确定如何开始使用两者。我坚持将数据从服务器传递到前端。在 Express 中，我通常会连接到数据库，然后将数据传递到res.render，然后由模板引擎接管。到目前为止，我认为我必须运行一个handle函数来传递数据，然后我可以从我的页面访问它。但似乎句柄函数针对每个请求运行，如果我的所有页面都需要不同的数据，这是否意味着我必须为每个页面使用巨大的 switch 语句或其他语句？

谁能告诉我这是否是传递数据的正确方法，或者是否有更好的方法。抱歉，我对 Metaf Rameworks 和 Svelte 还很陌生。

Answer 1

下面接受的答案是在 2022 年 9 月对 SvelteKit 的工作方式进行认真检修之前编写的，这是一个新答案：

路由是基于目录的，一个目录对应一条路由。在此目录中，您可以找到几个文件，最重要的是+page.svelte，这是您的“页面组件”，也是大部分代码所在的位置。其中一个道具是名为 的特殊道具data，可用于将数据传递到页面。

<script>
  export let data
</script>

为此，您可以load在两个不同的文件中使用该函数：+page.js和+page.server.js.

export const load = async () => {
  return {
    // this object is sent to the data prop.
  }
}

这两个文件之间的区别在于，+page.js最初将在服务器上加载，然后始终在客户端上加载，而+page.server.js始终在服务器上运行。（在客户端导航期间，使用常规获取命令获取此数据，然后传递给组件）。

这意味着您很可能希望将数据库连接和调用放入+page.server.js.

旧答案

有两种方法可以实现您想做的事情。对于这两种情况，假设您有一个“关于”页面，并且希望像某些团队成员一样在此页面上显示动态数据。您将有一个名为about.svelte（这使得/about路由）的文件，其中包含以下内容：

<script>
  export let team = [];
</script>
{#each team as member}
  ...
{/each}

现在如何将team数据获取到页面本身？

功能load​

第一个选项是函数，这是在页面加载之前load运行的函数，可用于获取该页面的数据。您可以将以下块放入 中，通常放在另一个块之前：about.sveltescript

<script context="module">
  export async function load({ fetch }) {
    const team = await fetch('/api/team').then(res => res.json());
    return {
      props: {
        team
      }
    }
  }
</script>

需要注意的是，您需要某种 api（/api/team在本例中）来为您提供数据。

页面端点

第二种选择是让一个所谓的page endpointthis 充当一种 api 并位于页面本身旁边。在与about.svelte相同的文件夹中添加一个文件about.js：

export async function get() {
  const team = []; // add team data here somehow
  return {
   status: 200,
   body: {
     team
   }
}

有什么不同 ？

何时使用哪种方法主要取决于您，但您必须记住以下两件事：

• 该load函数可能需要另一个 api（不一定是 SvelteKit）
• 该load函数在第一页上在服务器上执行，然后将始终在客户端上运行。另一方面，端点始终在服务器端运行。