上次写了一个 SSR 的 DEMO，明天写个小 Demo 来从头实现一下 react 的 SSG，来了解下 SSG 是如何实现的。

什么是 SSG

SSG 即 Static Site Generation 动态站点生成，是指将在构建时就提前生成动态 HTML 页面，速度很快，个别用于以下场景：

  1. SEO （搜索引擎优化）：因为局部搜索引擎对 CSR 内容反对不佳，所以 SSG 能够晋升网站在搜索引擎后果中的排名。
  2. 动态站点：比方博客、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 (        <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>    );};

构建脚本

而后再来实现下构建脚本，首先构建脚本一样须要反对 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, `<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>`);

首先通过 readdirSync 读取博文信息目录，这里只解决了单层，简单点的须要递归解决下多层目录构造。而后将每篇博文通过 renderToString 渲染为动态 HTML 并写入文件。最初再输入列表对应的 HTML 文件即可。

通过该脚本能够通过以下的博文：

生成以下 HTML：

动态文件服务

HTML 生成后，只须要启动动态文件服务器，将动态 HTML 丢过来即可，能够应用 nginx 或者 serve 包。

更多细节

下面只是一个最简略的例子，要实现一个残缺的零碎还须要思考以下几个方面：

  • 款式反对 - 在渲染动态文件时增加上 link 引入即可。
  • hydrate - 本文并没有实现 hydrate，其实实现逻辑差不多，在动态文件渲染时嵌入脚本，而后脚本在客户端进行 hydrate，不过个别的 SSG 场景下动静的内容不多，所以如果没有交互能够疏忽。

总结

React 中的 SSG 实质也是通过 renderToString 来实现，然而机会与 SSR 不同，是在构建时进行。

最初

本文的 demo 代码搁置在 React SSG Demo 中，可自行取阅。