React SSG - 也写个 Demo 吧

上次写了一个 SSR 的 DEMO，今天写个小 Demo 来从头实现一下 react 的 SSG，来理解下 SSG 是如何实现的。

什么是 SSG

SSG 即 Static Site Generation 静态站点生成，是指将在构建时就提前生成静态 HTML 页面，速度很快，一般用于以下场景：

1. SEO （搜索引擎优化）：由于部分搜索引擎对 CSR 内容支持不佳，所以 SSG 可以提升网站在搜索引擎结果中的排名。
2. 静态站点：比如博客、CMS 系统输出站点等，由于内容以静态内容居多，都可以使用 SSG。

如何实现

简单的 SSG 和 SSR 实现原理差不多，只是时机不同： SSR 渲染 HTML 的过程在服务端，而 SSG 则在构建时。渲染同样是通过在 Node 端导入要渲染的组件，然后调用 react-dom/server 包中提供的 renderToString 方法将该组件的渲染内容输出为 HTML 保存。

系统设计

下面使用 SSG 实现一个简单的静态博