React?SSG實現(xiàn)Demo詳解

更新時間：2023年07月07日 10:16:48 作者：嘿嘿不務正業(yè)

這篇文章主要為大家介紹了React?SSG實現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>

什么是 SSG

上次寫了一個 SSR 的 DEMO，今天寫個小 Demo 來從頭實現(xiàn)一下 react 的 SSG，來理解下 SSG 是如何實現(xiàn)的。

SSG 即 Static Site Generation 靜態(tài)站點生成，是指將在構建時就提前生成靜態(tài) HTML 頁面，速度很快，一般用于以下場景：

SEO （搜索引擎優(yōu)化）：由于部分搜索引擎對 CSR 內容支持不佳，所以 SSG 可以提升網(wǎng)站在搜索引擎結果中的排名。
靜態(tài)站點：比如博客、CMS 系統(tǒng)輸出站點等，由于內容以靜態(tài)內容居多，都可以使用 SSG。

如何實現(xiàn)

簡單的 SSG 和 SSR 實現(xiàn)原理差不多，只是時機不同： SSR 渲染 HTML 的過程在服務端，而 SSG 則在構建時。渲染同樣是通過在 Node 端導入要渲染的組件，然后調用 react-dom/server 包中提供的 renderToString 方法將該組件的渲染內容輸出為 HTML 保存。

系統(tǒng)設計

下面使用 SSG 實現(xiàn)一個簡單的靜態(tài)博客系統(tǒng)：

每篇博文都使用一個 JSON 文件來記錄其中的信息（為了簡化沒有使用 markdown，可以理解為 markdown 博文信息已提前轉換為 JSON 文件）
構建時會將博文編譯為靜態(tài) HTML 文件，并生成一個博文列表的 HTML 文件
通過靜態(tài)文件服務器啟動即可展示博文

組件設計

可以看出我們只需要兩個組件：

一個 Post 組件，用于接收博文信息展示博文
一個 List 組件，用于接受博文列表展示博文清單

簡單的實現(xiàn)一下：

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>
    );
};

構建腳本

然后再來實現(xiàn)下構建腳本，首先構建腳本一樣需要支持 JSX 的解析，然后構建腳本讀取博文數(shù)據(jù)文件夾下的所有文件，將其依次解析為靜態(tài) 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 渲染為靜態(tài) HTML 并寫入文件。最后再輸出列表對應的 HTML 文件即可。

通過該腳本可以通過以下的博文：