术语表

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

CSR

客户端渲染 (CSR) 是使用 JavaScript 在 Web 浏览器中生成页面内容的过程。

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

水合

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

在 SvelteKit 中，默认情况下将对页面进行水合，但您可以使用csr = false 页面选项关闭 JavaScript。

预渲染

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

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

预渲染页面不限于静态内容。如果用户特定数据是在客户端获取和渲染的，则可以构建个性化页面。这受制于您将体验到上面讨论的未执行 SSR 内容的缺点。

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

路由

默认情况下，当您导航到新页面（通过单击链接或使用浏览器的向前或向后按钮）时，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。