预渲染 (SSG)

什么是预渲染

预渲染指的是构建时渲染页面 HTML（运行 $vite build 时）

如果不使用预渲染，那么页面 HTML 会在请求时渲染（当用户页面导航时）

使用预渲染的话，我们不需要 Node.js 服务：我们的应用程序仅包含静态文件（HTML、JS、CSS、images 等），我们可以将其部署到“静态host”上，比如： GitHub Pages， Cloudflare Pages，或 Netlify

如果不使用预渲染，那么我们需要一个 Node.js 生产环境服务，（或类 Node.js 环境，如：Cloudflare Workers 或 Vercel），以便在请求时动态渲染页面 HTML

Tools that pre-render pages are also known as "SSG" (Static-Site Generators). 预渲染页面也被称为 “SSG” （静态站点生成器）

如何预渲染

我们可以通过全局配置 prerender 设置预渲染：

// vite.config.js

import { ssr } from "vite-plugin-ssr/plugin";

export default {
  plugins: [ssr({ prerender: true })],
};

预渲染配置： API > prerender 配置.

开启预渲染后，执行 $ vite build 时页面渲染成 HTML。生成的 HTML 文件在 dist/client 目录下

对于具有参数化路由的页面（例如：/movie/@movieId），我们必须使用 prerender() hook 指定需要预渲染的 URL 列表。prerender() hook也可用于加速预渲染

默认情况下，所有页面都是预渲染的。如果想只预渲染部分页面，我们可以使用 partial option 配合 .page.server.js#doNotPrerender

如果预渲染所有页面，那么我们可以使用 Vite 的 CLI 代替服务（$ vite dev, $ vite build, 和 $ vite preview）。请参考以下的示例链接

我们可以编程式调用预渲染，具体请参阅 API > prerender() 程序化

React 例子：

/examples/react-full/vite.config.ts （参考设置 prerender 为 true）
/examples/react-full/pages/hello/index.page.server.ts （参考 prerender() hook）
/examples/react-full/pages/star-wars/index/index.page.server.ts （参考 prerender() hook）
/examples/react-full/package.json （参考 Vite CLI 用法）

Vue 例子：

/examples/vue-full/vite.config.ts （参考设置 prerender 为 true）
/examples/vue-full/pages/hello/index.page.server.ts （参考 prerender() hook）
/examples/vue-full/pages/star-wars/index/index.page.server.ts （参考 prerender() hook）
/examples/vue-full/package.json （参考 Vite CLI 用法）

SSG vs SSR

SSG 和 SSR 之间唯一的区别是渲染 HTML 的时间点

SSG：页面在构建时渲染（调用 $ vite build 命令时）
SSR：页面在请求时渲染（用户进入网页和调用 renderPage() 时）

客户端代码在用户浏览器中加载执行，始终在请求时执行

我应该使用预渲染吗？

简言之：我们应该尽可能使用预渲染

预渲染不需要 Node.js 服务，这使得部署更简单。其性能也明显更好，因为 HTML 不会在每次请求时重新生成

预渲染不能用户所有类型的网站。所以问题来了：我应该使用预渲染吗？

预渲染不能用于内容高度动态的网站，例如：Hacker News 或 Reddit：用户每次发布链接或撰写评论时，内容都会发生改变。这种情况下我们不能使用预渲染：a) 预渲染的 HTML 卡在构建时，b) 如果每秒都有新内容，我们无法重新构建整个网站

预渲染适用于内容偶尔改变的网站，一天更新几次那种。比如：https://vite-plugin-ssr.com 只是偶尔更新，每次 vite-plugin-ssr 维护者改变内容的时候，整个 https://vite-plugin-ssr.com 都重新构建。预渲染支持把 https://vite-plugin-ssr.com 部署到 Github Pages，这比使用 Node.js 生产服务更容易（并且性能更高）一个数量级。

✍ Edit this page