中文字幕一区二区三区在线播放,日本一区二区三区在线观看,国产精品欧美一区喷水

React SSG - 也寫(xiě)個(gè) Demo 吧

2023-06-24 22:19:10 來(lái)源：博客園

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

什么是 SSG

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 (                    {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)建腳本

然后再來(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 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", "") }))} />    )}
`);

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

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

生成以下 HTML：

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

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

更多細(xì)節(jié)

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

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

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

最后

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

關(guān)鍵詞：