SSG

SSG 英文全称 Static Site Generation，中文翻译“静态站点生成”

是指在项目构建阶段就生成了页面的 HTML 文件，用户访问的时候直接返回 HTML 文件，速度更快，适合不会经常更新的页面

在 NextJS 中编译 SSG，如果你的 page.js 组件没有任何获取数据等操作，默认就是 SSG，通过在 next.config.js 中配置下面属性可以在 npm build 之后，在 out 文件夹中看到生成的文件

const nextConfig = { output: 'export' } 
module.exports = nextConfig

SSG 如何获取数据？

在 Nextjs 中如果希望在 build 构建 SSG 的时候，动态的获取数据，可以使用 getStaticProps API 来在构建阶段获取数据，并且将数据通过 props 属性传递给页面。
getStaticProps 在每次构建的时候调用，getServerSideProps 在每次请求的时候调用

NextJS 还可以通过动态路由，通过 getSttaicPaths 定义预渲染的路径。来批量生成静态页面

适用用例

• 内容变化非常不频繁的任何页面
• 网站布局
• 性能关键的营销页面
• 文档或其他快速重建的网站

优点

• 页面加载速度快
• 出色的SEO
• 减少服务器负载
• 基础设施成本低