术语表

SvelteKit 的核心提供了一个高度可配置的渲染引擎。本节描述了在讨论渲染时使用的一些术语。上述文档中提供了设置这些选项的参考。

CSR

客户端渲染（CSR）是使用 JavaScript 在 web 浏览器中生成页面内容。

在 SvelteKit 中，默认会使用客户端渲染，但您可以通过csr = false 页面选项关闭 JavaScript。

水合（Hydration）

Svelte 组件存储一些状态，并在状态更新时更新 DOM。在 SSR 期间获取数据时，SvelteKit 默认会存储这些数据，并将其与服务端渲染的 HTML 一起传输到客户端。然后，组件可以使用该数据在客户端上初始化，而无需再次调用相同的 API 端点。Svelte 随后会检查 DOM 是否处于预期状态，并在一个称为水合的过程中添加事件监听器。一旦组件完全水合，它们就可以像任何新创建的 Svelte 组件一样对其属性的变化做出反应。

在 SvelteKit 中，页面默认会被水合，但您可以通过csr = false 页面选项关闭 JavaScript。

预渲染（Prerendering）

预渲染意味着在构建时计算页面内容并保存 HTML 以供显示。这种方法具有与传统服务端渲染页面相同的优势，但避免了为每个访问者重新计算页面，因此随着访问者数量的增加，几乎可以免费扩展。权衡之处在于构建过程更加耗费资源，并且预渲染的内容只能通过构建和部署应用程序的新版本来更新。

并非所有页面都可以预渲染。基本规则是：要使内容可预渲染，任何两个直接访问它的用户必须从服务端获得相同的内容，并且页面不能包含 actions。请注意，只要所有用户都会看到相同的预渲染内容，您仍然可以预渲染基于页面参数加载的内容。

预渲染的页面并不限于静态内容。如果用户特定的数据是在客户端获取和渲染的，您可以构建个性化页面。这受制于上述不做 SSR 的内容的缺点。

在 SvelteKit 中，您可以通过prerender 页面选项和 svelte.config.js 中的 prerender 配置控制预渲染。

路由（Routing）

默认情况下，当您导航到新页面时（通过点击链接或使用浏览器的前进或后退按钮），SvelteKit 将拦截尝试的导航，而不是允许浏览器向服务端发送目标页面的请求。然后，SvelteKit 将通过渲染新页面的组件来更新客户端显示的内容，这反过来可以调用必要的 API 端点。这种根据尝试的导航在客户端更新页面的过程称为客户端路由。

在 SvelteKit 中，默认会使用客户端路由，但您可以通过 data-sveltekit-reload 跳过它。

SPA

单页应用（SPA）是一种应用程序，其中所有对服务端的请求都加载单个 HTML 文件，然后根据请求的 URL 对请求的内容进行客户端渲染。所有导航都在客户端处理，这个过程称为客户端路由，每页内容都会更新，而常见的布局元素基本保持不变。SPA 不提供 SSR，这具有上述缺点。然而，某些应用程序不会受到这些缺点的重大影响，比如登录后的复杂业务应用程序，在这种情况下 SEO 不重要，并且已知用户将从一致的计算环境访问应用程序。

在 SvelteKit 中，您可以使用 adapter-static 构建 SPA。

SSG

静态站点生成（SSG）是指每个页面都预渲染的站点。SvelteKit 不是为仅做静态站点生成而构建的，因此在高效渲染大量页面方面可能不如专门为此目的构建的工具。然而，与大多数专门构建的 SSG 相比，SvelteKit 确实很好地允许在不同页面上混合和匹配不同的渲染类型。完全预渲染站点的一个好处是您不需要维护或支付服务端来执行 SSR。一旦生成，站点就可以从 CDN 提供服务，从而带来出色的”首字节时间”性能。这种交付模型通常被称为 JAMstack。

在 SvelteKit 中，您可以通过使用 adapter-static 或通过使用prerender 页面选项或 svelte.config.js 中的 prerender 配置配置每个页面预渲染来进行静态站点生成。

SSR

服务端渲染（SSR）是在服务端上生成页面内容。SSR 通常是 SEO 的首选。虽然一些搜索引擎可以索引在客户端动态生成的内容，但在这些情况下可能需要更长的时间。它还倾向于提高感知性能，并使您的应用程序在 JavaScript 失败或被禁用时对用户可访问（这种情况发生的频率可能比您想象的要高）。

在 SvelteKit 中，页面默认是服务端渲染的。您可以通过ssr 页面选项禁用 SSR。