上次寫了一個 SSR 的 DEMO，今天寫個小 Demo 來從頭實作一下 react 的 SSG，來理解下 SSG 是如何實作的，
什么是 SSG
SSG 即 Static Site Generation 靜態站點生成，是指將在構建時就提前生成靜態 HTML 頁面，速度很快，一般用于以下場景：
SEO（搜索引擎優化）：由于部分搜索引擎對CSR內容支持不佳，所以SSG可以提升網站在搜索引擎結果中的排名，- 靜態站點：比如博客、
CMS系統輸出站點等，由于內容以靜態內容居多，都可以使用SSG，
如何實作
簡單的 SSG 和 SSR 實作原理差不多，只是時機不同： SSR 渲染 HTML 的程序在服務端，而 SSG 則在構建時，渲染同樣是通過在 Node 端匯入要渲染的組件，然后呼叫 react-dom/server 包中提供的 renderToString 方法將該組件的渲染內容輸出為 HTML 保存，
系統設計
下面使用 SSG 實作一個簡單的靜態博客系統：
- 每篇博文都使用一個
JSON檔案來記錄其中的資訊（為了簡化沒有使用markdown，可以理解為markdown博文資訊已提前轉換為JSON檔案） - 構建時會將博文編譯為靜態
HTML檔案，并生成一個博文串列的HTML檔案 - 通過靜態檔案服務器啟動即可展示博文
組件設計
可以看出我們只需要兩個組件：
- 一個
Post組件，用于接收博文資訊展示博文 - 一個
List組件，用于接受博文串列展示博文清單
簡單的實作一下：
import React from 'react';
export default ({
data
}: {
data: {
title: string;
content: { title: string; content: string }[];
};
}) => {
return (
<div>
<h1>{data.title}</h1>
<div>
{data.content.map(({ title, content }) => (
<article key={title}>
<h2>{title}</h2>
<p>{content}</p>
</article>
))}
</div>
</div>
);
};
import React from 'react';
export default ({ list }: { list: { title: string; key: string }[] }) => {
return (
<div>
<ul>
{list.map(({ title, key }) => (
<li key={title}>
<a href=https://www.cnblogs.com/zxbing0066/archive/2023/06/24/{`/posts/${key}.html`}>{title}
))}
