静态页面生成（SSG）

什么是静态网站（static website）？

静态网站由一个或多个每次以相同方式加载的 HTML 网页组成。静态网站与动态网站形成对比，动态网站的加载基于任意数量的变化数据输入，例如用户的位置、时间或用户操作。静态网页是可以快速加载的简单 HTML 文件，而动态网页需要在浏览器中执行 JavaScript 代码才能呈现。

SSG是一种基于原始数据和一组模板生成完整静态 HTML 网站的工具。本质上，SSG会自动完成对单个 HTML 页面进行编码的任务，并使这些页面提前准备好为用户提供服务。因为这些 HTML 页面是预先构建的，所以它们可以非常快速地加载到用户的浏览器中。

SSG是内容管理系统 (CMS) 的替代品——另一种用于管理 Web 内容、生成网页和实施模板的工具。

SSG类似于服务器端渲染，不同之处在于您在构建时而不是在请求时渲染页面。SSG会自动完成对单个 HTML 页面进行编码的任务，并使这些页面提前准备好为用户提供服务。因为这些 HTML 页面是预先构建的，所以它们可以非常快速地加载到用户的浏览器中。

与服务器渲染不同，由于不必动态生成页面的HTML，因此它还可以实现始终如一的快速到第一字节的时间。

通常，静态呈现意味着提前为每个URL生成单独的HTML文件。

借助预先生成的HTML响应，可以将静态渲染器部署到多个CDN，以利用边缘缓存的优势。

前端框架是预构建代码的文件和文件夹的集合，用于帮助设计和格式化网站。常见的前端框架包括 Bootstrap、React 和 Vue.js，等。

当开发人员最初构建网站时，前端框架非常有用。但是，前端框架本身不会生成 HTML 网页，除非开发人员使用其他工具。SSG可以与框架一起使用，供开发人员快速获得完全设计好的网站或应用程序以供使用。大多数SSG允许开发人员使用他们想要的框架。

加载速度快 -由于静态站点生成器是提前创建网页而不是按需创建网页（如使用 CMS），因此网页在用户浏览器中的加载速度略快。将HTML发送给客户端，所以几乎会立即看到页面内容。
无需获取其他客户端 -理想情况下，服务器呈现过程将进行所有必需的调用以获取数据，因此不会从客户端进行任何其他服务调用。
非常适合SEO
更轻量的后端 -静态网站是轻量级的，不需要在服务器端运行那么多代码，而基于 CMS 的网站不断向服务器端查询内容。
定制-开发人员可以创建他们想要的任何模板。它们不受 CMS 提供的字段的限制，也不受 CMS 内置模板的限制。

大型页面可能会很慢 -如果路由很多，速度可能会变慢。
与某些UI库不兼容 -如果你用的某些库使用了window，那你就要想办法来解决了。因为 Node 中没有window或者 document。
很少或没有预先构建的模板-定制的缺点是可能需要更长的时间。许多静态站点生成器不附带模板，开发人员首先必须花费大量时间从头开始构建它们。
没有用户友好的界面-非开发者用户更难使用静态站点生成器发布内容。没有 CMS 界面，使用原始的未格式化数据可能会让用户感到害怕。此外，进行网站更新通常需要开发人员支持。