【静态站点（一）】之 静态网站生成器

笔记来源：拉勾教育 大前端高薪训练营

一、什么是静态网站生成器

• 静态网站生成器是一系列配置、模板以及数据，生成静态 HTML 文件及相关资源的工具
• 这个功能也叫 预渲染
• 生成的网站不需要类似 PHP 这样的服务器
• 只需要放到支持静态资源的 Web Server 或 CDN 上即可运行

二、静态网站的好处

• 省钱
  • 不需要专业的服务器，只要能托管静态文件的空间即可
• 快速
  • 不经过后端服务器的处理，只传输内容
• 安全
  • 没有后端程序的运行，自然会更安全

三、常见的静态网站生成器

• Jekyll（Ruby）
• Hexo（Node）
• Hugo（Golang）
• Gatsby（Node/React）
• Gridsome（Node/Vue）
• 另外，Next.js，Nuxt.js 也能生成静态网站，但是它们更多被认为是 SSR（服务端渲染）框架。

四、JAMStack

JAMStack(静态网站生成器) 使您可以通过预渲染文件并直接从CDN直接提供文件来构建快速安全的站点和应用程序，而无需管理或运行Web服务器。

• 学习网站：Learn more about the Jamstack.
• JAMStack 的 JAM 是 JavaScript、API 和 Markup 的首字母组合
• 本质上是一种胖前端，通过调用各种 API 来实现更多的功能
• 其实也是一种前后端的模式，只不过离得比较开，甚至前后端来自多个不同的厂商

五、静态应用的使用场景

• 不适合有大量路由页面的应用
  • 如果您的站点有成百上千条路由页面，则预渲染将非常缓慢。当然，你每次更新只需要做一次，但是可能要花一些时间。大多数人不会最终获得数千条静态路由页面，而只是以防万一。
• 不适合有大量动态内容的应用
  • 如果渲染路线中包含特定于用户查看其内容或其动态源的内容，则应确保您具有可以显示的占位符组件，直到动态内容加载到客户端为止。否则可能有点怪异。