React SSG

上次寫了一個 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={`/posts/${key}.html`}>{title}</a>
                    </li>
                ))}
            </ul>
        </div>
    );
};

構建指令碼

然後再來實現下構建指令碼，首先構建指令碼一樣需要支援 JSX 的解析，然後構建指令碼讀取博文資料資料夾下的所有檔案，將其依次解析為靜態 HTML，並且再生成一份列表的 HTML。

程式碼也非常簡單：

import fs from 'fs';
import { renderToString } from 'react-dom/server';
import React from 'react';
import Post from './ui/Post';
import List from './ui/List';

// get all the files in posts
const posts = fs.readdirSync('posts');

// make sure the dir exists
if (!fs.existsSync('dist')) {
    fs.mkdirSync('dist');
}
if (!fs.existsSync('dist/posts')) {
    fs.mkdirSync('dist/posts');
}

posts.map(post => {
    const postInfo = require('./posts/' + post);
    const fileName = `dist/posts/${post.replace('.json', '.html')}`;
    // make sure file exists
    fs.writeFileSync(fileName, `<div id="root">${renderToString(<Post data={postInfo} />)}</div>`);
});

fs.writeFileSync(
    'dist/index.html',
    `<div id="root">${renderToString(
        <List list={posts.map(post => ({ ...require('./posts/' + post), key: post.replace('.json', '') }))} />
    )}</div>`
);

首先通過 readdirSync 讀取博文資訊目錄，這裡只處理了單層，複雜點的需要遞迴處理下多層目錄結構。然後將每篇博文通過 renderToString 渲染為靜態 HTML 並寫入檔案。最後再輸出列表對應的 HTML 檔案即可。

通過該指令碼可以通過以下的博文：