关于前端:React-SSG-也写个-Demo-吧

上次写了一个 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 (
        <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 posts
const posts = fs.readdirSync('posts');

// make sure the dir exists
if (!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 中，可自行取阅。

关于前端:React-SSG-也写个-Demo-吧

什么是 SSG

如何实现

零碎设计

组件设计

构建脚本

动态文件服务

更多细节

总结

最初