词汇表
SvelteKit 的核心提供了高度可配置的渲染引擎。本节介绍了讨论渲染时使用的一些术语。上述文档提供了有关设置这些选项的参考。
¥The core of SvelteKit provides a highly configurable rendering engine. This section describes some of the terms used when discussing rendering. A reference for setting these options is provided in the documentation above.
CSR
客户端渲染 (CSR) 是使用 JavaScript 在 Web 浏览器中生成页面内容。
¥Client-side rendering (CSR) is the generation of the page contents in the web browser using JavaScript.
在 SvelteKit 中，默认情况下将使用客户端渲染，但你可以使用 csr = false 页面选项 关闭 JavaScript。
¥In SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with the csr = false page option.
Edge
边缘渲染是指在靠近用户的内容交付网络 (CDN) 中渲染应用。边缘渲染允许页面的请求和响应传输更短的距离，从而改善延迟。
¥Rendering on the edge refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance thus improving latency.
Hydration
Svelte 组件存储一些状态并在状态更新时更新 DOM。在 SSR 期间获取数据时，默认情况下 SvelteKit 将存储此数据并将其与服务器渲染的 HTML 一起传输到客户端。然后可以使用该数据在客户端上初始化组件，而无需再次调用相同的 API 端点。然后，Svelte 将检查 DOM 是否处于预期状态，并在称为 hydration 的过程中附加事件监听器。一旦组件完全水化，它们就可以像任何新创建的 Svelte 组件一样对其属性的变化做出反应。
¥Svelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.
在 SvelteKit 中，页面将默认进行水化，但你可以使用 csr = false 页面选项 关闭 JavaScript。
¥In SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with the csr = false page option.
ISR
增量静态再生 (ISR) 允许你在访问者请求这些页面时在你的网站上生成静态页面，而无需重新部署。与具有大量页面的 SSG 站点相比，这可能会减少构建时间。你可以执行 使用 adapter-vercel 的 ISR。
¥Incremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduces build times compared to SSG sites with a large number of pages. You can do ISR with adapter-vercel.
MPA
在服务器上渲染每个页面视图的传统应用（例如使用 JavaScript 以外的语言编写的应用）通常被称为多页应用 (MPA)。
¥Traditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).
预渲染(Prerendering)
¥Prerendering
预渲染意味着在构建时计算页面的内容并保存 HTML 以供显示。这种方法具有与传统服务器渲染页面相同的好处，但避免为每个访问者重新计算页面，因此随着访问者数量的增加几乎可以免费扩展。权衡是构建过程更昂贵，并且只能通过构建和部署新版本的应用来更新预渲染的内容。
¥Prerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.
但并非所有导航都会导致错误，例如，如果下一页的 JavaScript 已加载。基本规则如下：要使内容可预渲染，任何两个直接访问该内容的用户都必须从服务器获取相同的内容，并且页面不得包含 actions。请注意，只要所有用户都会看到相同的预渲染内容，你仍然可以预渲染基于页面参数加载的内容。
¥Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain actions. Note that you can still prerender content that is loaded based on the page’s parameters as long as all users will be seeing the same prerendered content.
预渲染页面不仅限于静态内容。如果在客户端获取和渲染用户特定数据，你可以构建个性化页面。但需要注意的是，如上所述，如果不对该内容执行 SSR，你将遇到一些不利因素。
¥Pre-rendered pages are not limited to static content. You can build personalized pages if user-specific data is fetched and rendered client-side. This is subject to the caveat that you will experience the downsides of not doing SSR for that content as discussed above.
在 SvelteKit 中，你可以使用 svelte.config.js 中的 prerender 页面选项 和 prerender 配置 控制预渲染。
¥In SvelteKit, you can control prerendering with the prerender page option and prerender config in svelte.config.js.
PWA
渐进式 Web 应用 (PWA) 是使用 Web API 和技术构建的应用，但功能类似于移动或桌面应用。网站充当 可以安装 PWA，允许你在启动器、主屏幕或开始菜单上向应用添加快捷方式。许多 PWA 将利用 服务工作者 来构建离线功能。
¥A progressive web app (PWA) is an app that’s built using web APIs and technologies, but functions like a mobile or desktop app. Sites served as PWAs can be installed, allowing you to add a shortcut to the application on your launcher, home screen, or start menu. Many PWAs will utilize service workers to build offline capabilities.
路由(Routing)
¥Routing
默认情况下，当你导航到新页面时（通过单击链接或使用浏览器的前进或后退按钮），SvelteKit 将拦截尝试的导航并处理它，而不是允许浏览器向服务器发送目标页面的请求。SvelteKit 随后将通过渲染新页面的组件来更新客户端上显示的内容，而新页面又可以调用必要的 API 端点。响应尝试导航而更新客户端上的页面的过程称为客户端路由。
¥By default, when you navigate to a new page (by clicking on a link or using the browser’s forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.
在 SvelteKit 中，默认情况下将使用客户端路由，但你可以使用 data-sveltekit-reload 跳过它。
¥In SvelteKit, client-side routing will be used by default, but you can skip it with data-sveltekit-reload.
SPA
单页应用 (SPA) 是一种应用，其中对服务器的所有请求都会加载单个 HTML 文件，然后该文件根据请求的 URL 对请求的内容进行客户端渲染。所有导航都在客户端处理，这个过程称为客户端路由，每个页面的内容都会更新，而常见的布局元素基本保持不变。SPA 不提供 SSR，因此性能和 SEO 特性较差。但是，有些应用不会受到这些缺点的很大影响，例如登录背后的复杂业务应用，其中 SEO 并不重要，并且已知用户将从一致的计算环境访问该应用。
¥A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering of the requested contents based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. SPAs do not provide SSR and thus have worse performance and SEO characteristics. However, some applications are not greatly impacted by these shortcomings such as a complex business application behind a login where SEO would not be important and it is known that users will be accessing the application from a consistent computing environment.
在 SvelteKit 中，你可以使用 使用 adapter-static 构建 SPA。
¥In SvelteKit, you can build an SPA with adapter-static.
SSG
静态站点生成 (SSG) 是指每个页面都经过预渲染的站点。完全预渲染站点的一个好处是你不需要维护或支付服务器来执行 SSR。生成后，该站点可以从 CDN 提供服务，从而实现出色的“第一个字节时间”性能。这种交付模型通常称为 JAMstack。
¥Static Site Generation (SSG) is a term that refers to a site where every page is prerendered. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great “time to first byte” performance. This delivery model is often referred to as JAMstack.
在 SvelteKit 中，你可以使用 adapter-static 进行静态站点生成，或者通过在 svelte.config.js 中使用 prerender 页面选项 或 prerender 配置 配置每个页面进行预渲染。
¥In SvelteKit, you can do static site generation by using adapter-static or by configuring every page to be prerendered using the prerender page option or prerender config in svelte.config.js.
SSR
服务器端渲染 (SSR) 是在服务器上生成页面内容。SSR 通常是 SEO 的首选。虽然有些搜索引擎可以索引在客户端动态生成的内容，但即使在这些情况下也可能需要更长的时间。它还倾向于提高感知性能，并在 JavaScript 失败或被禁用（比你想象的更频繁 会发生这种情况）时让用户能够访问你的应用。
¥Server-side rendering (SSR) is the generation of the page contents on the server. SSR is generally preferred for SEO. While some search engines can index content that is dynamically generated on the client-side it may take longer even in these cases. It also tends to improve perceived performance and makes your app accessible to users if JavaScript fails or is disabled (which happens more often than you probably think).
在 SvelteKit 中，页面默认在服务器端渲染。你可以使用 ssr 页面选项 禁用 SSR。
¥In SvelteKit, pages are server-side rendered by default. You can disable SSR with the ssr page option.