,,

React SSG - 也寫個 Demo 吧

2023-06-24 22:19:10 來源：博客園

上次寫了一個 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 (                    {data.title}
                            {data.content.map(({ title, content }) => (                                            {title}
                        {content}
                    
                ))}            
        
    );};

import React from "react";export default ({ list }: { list: { title: string; key: string }[] }) => {    return (                                    {list.map(({ title, key }) => (                                            {title}                    
                ))}            
        
    );};

構建腳本

然后再來實現下構建腳本，首先構建腳本一樣需要支持 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 postsconst posts = fs.readdirSync("posts");// make sure the dir existsif (!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, `${renderToString()}
`);});fs.writeFileSync(    "dist/index.html",    `${renderToString(         ({ ...require("./posts/" + post), key: post.replace(".json", "") }))} />    )}
`);

首先通過 readdirSync讀取博文信息目錄，這里只處理了單層，復雜點的需要遞歸處理下多層目錄結構。然后將每篇博文通過 renderToString渲染為靜態 HTML并寫入文件。最后再輸出列表對應的 HTML文件即可。

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

生成以下 HTML：

靜態文件服務

HTML生成后，只需要啟動靜態文件服務器，將靜態 HTML丟過去即可，可以使用 nginx或者 serve包。

更多細節

上面只是一個最簡單的例子，要實現一個完整的系統還需要考慮以下幾個方面：

樣式支持 - 在渲染靜態文件時添加上 link引入即可。hydrate- 本文并沒有實現 hydrate，其實實現邏輯差不多，在靜態文件渲染時嵌入腳本，然后腳本在客戶端進行 hydrate，不過一般的 SSG場景下動態的內容不多，所以如果沒有交互可以忽略。總結

React中的 SSG本質也是通過 renderToString來實現，但是時機與 SSR不同，是在構建時進行。

最后

本文的 demo代碼放置在 React SSG Demo 中，可自行取閱。

關鍵詞：