Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

预渲染意味着在构建时一次性生成页面的 HTML,而不是针对每个请求动态生成。

这样做的优势在于提供静态数据非常经济且性能出色,使您能够轻松服务大量用户,而无需担心缓存控制头(这很容易出错)。

权衡之处在于构建过程会花费更长时间,并且预渲染的内容只能通过构建和部署应用程序的新版本来更新。

要预渲染页面,请将 prerender 设置为 true

src/routes/+page.server
export const prerender = true;

在本教程中,这不会产生任何可观察到的效果,因为应用程序正在 dev 模式下运行。

并非所有页面都可以被预渲染。基本规则是:要使内容可预渲染,任何两个直接访问该内容的用户必须从服务器获得相同的内容,并且页面不能包含表单 actions。带有动态路由参数的页面只要在 prerender.entries 配置中指定或可以通过 prerender.entries 中的页面链接访问,就可以被预渲染。

在根目录的 +layout.server.js 中将 prerender 设置为 true 实际上会将 SvelteKit 转变为静态站点生成器(SSG)。

在 GitHub 编辑此页面

上一页 下一页
1
2
<h1>Prerendering</h1>