Question

我最近开始通过 SvelteKit 使用 Svelte，我对这个框架有几个问题，我无法在源 / 文档中找到任何直接的答案：

SvelteKit 有SSR，并在文档中说：

所有服务器端代码（包括端点）都可以访问获取，以防您需要从外部 API 请求数据。

什么代码是服务器端渲染除了端点，它是如何决定的？来自 svelte 页面的脚本的所有代码在客户端上运行，或者其中一些在服务器上运行？

为了在本地使用SSR，您需要一个适配器，或者 svelte 自己启动服务器？

SSR如何在生产环境中工作，例如Netlify。netlify 适配器是否用于 SSR（在netlify 函数中运行端点）？如果未提供 netlify 适配器，端点将如何运行？

如果我想在sveltekit 项目中使用自定义 netlify 函数，需要什么配置（除了 netlify.toml 和 netlify 适配器），以便netlify 从函数目录中识别函数？

SSR 和预渲染之间的区别是什么？SSR仅用于端点和其他 js 代码，预渲染用于生成Html以将其发送到客户端，然后将其水合，并将编译的 js 代码发送到？

谢谢

14

1

Answer 1

默认情况下，当您第一次访问网站时，页面也会呈现在服务器端。当您导航到后续页面时，它们将呈现在客户端。

适配器仅在生产中使用。如果您运行npm run dev进行本地开发，您仍然可以获得 SSR。在生产中，SSR 的运行方式取决于您选择的适配器。生产需要适配器。adapter-node在节点服务器上运行 SSR，adapter-netlify在 Netlify 函数中运行 SSR，等等。

有关自定义 Netlify 函数的讨论，请参见此处：https://github.com/sveltejs/kit/issues/1249

SSR 也用于页面，但预渲染意味着渲染发生在构建时，而不是访问者访问页面时。有关更多信息，请参阅此建议的文档：https://github.com/sveltejs/kit/pull/1525

Answer 2

当您第一次访问网站时，页面是 SSR，包括您的 svelte 页面的script标记中的所有代码。但是，当您导航到其他页面时，代码将在客户端上运行，并且页面将动态呈现，因为 Sveltekit 使单个页面 Web 应用程序看起来像它具有与历史 API 不同的页面。

您可以决定哪些代码在服务器上运行,哪些在客户端上运行。如果您没有做任何特别的事情,Sveltekit 和您的部署环境将为您决定。如果您希望某些代码仅在浏览器中运行 (也许它需要使用window对象或需要身份验证),则可以使用 browser 变量。

import { browser } from '$app/env';
if (browser) {
  // Code that runs only in browser
}

您还可以将代码放在onMount函数中，该函数将在组件首次挂载时运行，这仅在浏览器中发生。

import { onMount } from 'svelte';
onMount(() => {
  // Do stuff
})

如果你想要 SSR，你可以把函数放在route/+page.js中的加载函数中。一个典型的用例是从数据库中抓取内容并填充和格式化内容的博客条目。如果你从一个 URL 到达页面，或者刷新页面，加载函数中的代码将在服务器上执行。如果你从你的 web 应用程序的其他地方导航到页面

import { error } from '@sveltejs/kit';
 
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    };
  }
 
  throw error(404, 'Not found');
}

我不太确定如何使用 Netlify 函数，正如 Ben 提到的，你可以看到https://github.com/sveltejs/kit/issues/1249的讨论。虽然我认为你可能能够实现与+page.server.js相同的功能，以及“操作”来调用它们。