预渲染意味着在构建时一次性生成页面的 HTML,而不是针对每个请求动态生成。
这样做的优势在于提供静态数据非常经济且性能出色,使您能够轻松服务大量用户,而无需担心缓存控制头(这很容易出错)。
权衡之处在于构建过程会花费更长时间,并且预渲染的内容只能通过构建和部署应用程序的新版本来更新。
要预渲染页面,请将 prerender
设置为 true
:
src/routes/+page.server
export const prerender = true;
在本教程中,这不会产生任何可观察到的效果,因为应用程序正在 dev
模式下运行。
并非所有页面都可以被预渲染。基本规则是:要使内容可预渲染,任何两个直接访问该内容的用户必须从服务器获得相同的内容,并且页面不能包含表单 actions。带有动态路由参数的页面只要在 prerender.entries
配置中指定或可以通过 prerender.entries
中的页面链接访问,就可以被预渲染。
在根目录的
+layout.server.js
中将prerender
设置为true
实际上会将 SvelteKit 转变为静态站点生成器(SSG)。
1
2
<h1>Prerendering</h1>