在 加载数据 章节中,我们了解了如何从 +page.js
、+page.server.js
、+layout.js
和 +layout.server.js
文件中导出 load
函数。我们还可以从这些模块导出各种页面选项:
¥In the chapter on loading data, we saw how you can export load
functions from +page.js
, +page.server.js
, +layout.js
and +layout.server.js
files. We can also export various page options from these modules:
ssr
— 页面是否应该由服务器渲染¥
ssr
— whether or not pages should be server-renderedcsr
— 是否加载 SvelteKit 客户端¥
csr
— whether to load the SvelteKit clientprerender
— 是否在构建时预渲染页面,而不是每个请求¥
prerender
— whether to prerender pages at build time, instead of per-requesttrailingSlash
— 是否删除、添加或忽略 URL 中的尾部斜杠¥
trailingSlash
— whether to strip, add, or ignore trailing slashes in URLs
在接下来的练习中,我们将依次了解这些内容。
¥In the following exercises, we’ll learn about each of these in turn.
页面选项可以应用于单个页面(如果从 +page.js
或 +page.server.js
导出),或页面组(如果从 +layout.js
或 +layout.server.js
导出)。要为整个应用定义选项,请从根布局中导出它。子布局和页面会覆盖父布局中设置的值,因此 — 例如 — 你可以为整个应用启用预渲染,然后为需要动态渲染的页面禁用它。
¥Page options can apply to individual pages (if exported from +page.js
or +page.server.js
), or groups of pages (if exported from +layout.js
or +layout.server.js
). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
你可以在应用的不同区域中混合搭配这些选项 - 你可以预渲染营销页面,动态服务器渲染数据驱动页面,并将管理页面视为客户端渲染的 SPA。这使得 SvelteKit 非常通用。
¥You can mix and match these options in different areas of your app — you could prerender your marketing pages, dynamically server-render your data-driven pages, and treat your admin pages as a client-rendered SPA. This makes SvelteKit very versatile.
<h2>Page options</h2>