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

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

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

什么是 SSG

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

SSG 即 Static Site Generation 靜態(tài)站點(diǎn)生成，是指將在構(gòu)建時(shí)就提前生成靜態(tài) HTML 頁(yè)面，速度很快，一般用于以下場(chǎng)景：

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

如何實(shí)現(xiàn)

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

系統(tǒng)設(shè)計(jì)

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

每篇博文都使用一個(gè) JSON 文件來(lái)記錄其中的信息（為了簡(jiǎn)化沒(méi)有使用 markdown，可以理解為 markdown 博文信息已提前轉(zhuǎn)換為 JSON 文件）
構(gòu)建時(shí)會(huì)將博文編譯為靜態(tài) HTML 文件，并生成一個(gè)博文列表的 HTML 文件
通過(guò)靜態(tài)文件服務(wù)器啟動(dòng)即可展示博文

組件設(shè)計(jì)

可以看出我們只需要兩個(gè)組件：

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

簡(jiǎn)單的實(shí)現(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>
    );
};

構(gòu)建腳本

然后再來(lái)實(shí)現(xiàn)下構(gòu)建腳本，首先構(gòu)建腳本一樣需要支持 JSX 的解析，然后構(gòu)建腳本讀取博文數(shù)據(jù)文件夾下的所有文件，將其依次解析為靜態(tài) HTML，并且再生成一份列表的 HTML。

代碼也非常簡(jiǎn)單：

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

首先通過(guò) readdirSync 讀取博文信息目錄，這里只處理了單層，復(fù)雜點(diǎn)的需要遞歸處理下多層目錄結(jié)構(gòu)。然后將每篇博文通過(guò) renderToString 渲染為靜態(tài) HTML 并寫入文件。最后再輸出列表對(duì)應(yīng)的 HTML 文件即可。

通過(guò)該腳本可以通過(guò)以下的博文：