跳至主要内容

附录

术语表

在 GitHub 上编辑此页面

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 页面选项prerender 配置svelte.config.js 中将每个页面配置为预渲染来执行静态站点生成。

SSR

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

在 SvelteKit 中,默认情况下页面是服务器端渲染的。你可以使用 ssr 页面选项 禁用 SSR。

上一个 其他资源
下一个