日本在线观看中文字幕,老司机美女一级毛片,日韩亚洲欧美一区

React SSG - 也寫個 Demo 吧

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

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

什么是 SSG

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

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

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

(資料圖片僅供參考)

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

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

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

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

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

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

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

構(gòu)建腳本

然后再來實現(xiàn)下構(gòu)建腳本，首先構(gòu)建腳本一樣需要支持 JSX的解析，然后構(gòu)建腳本讀取博文數(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 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讀取博文信息目錄，這里只處理了單層，復(fù)雜點的需要遞歸處理下多層目錄結(jié)構(gòu)。然后將每篇博文通過 renderToString渲染為靜態(tài) HTML并寫入文件。最后再輸出列表對應(yīng)的 HTML文件即可。

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

生成以下 HTML：

靜態(tài)文件服務(wù)

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

更多細節(jié)

上面只是一個最簡單的例子，要實現(xiàn)一個完整的系統(tǒng)還需要考慮以下幾個方面：

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

React中的 SSG本質(zhì)也是通過 renderToString來實現(xiàn)，但是時機與 SSR不同，是在構(gòu)建時進行。

最后

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

關(guān)鍵詞：