{title}
{content}
来源：博客园
2023-06-24 22:35:28
上次写了一个 SSR的 DEMO，今天写个小 Demo来从头实现一下 react的 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 }) => ( ))} );};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( ({ ...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 中，可自行取阅。
