基于 SSR 的预渲染首屏直出方案

基于 SSR 的预渲染首屏直出方案

Create React Doc 是一个使用 React 的 markdown 文档站点生成工具。此前在 Create React Doc 中引入了预渲染技术来预先生成对应路由的静态页面，以使基于其搭建的文档站点能享用到 SEO(Search Engine Optimization) 同时加快了首屏访问加载。

新的挑战

Create React Doc 使用预渲染技术获取各页面路由对应的 DOM 结构以生成对应的 HTML 文件，并将静态文件存放于 gh-pages 服务中(可自行选择其它存储服务)从而达到加快首屏访问加载以及 SEO。见如下蓝色线框流程图部分：

下图为 gp-pages 服务存放的静态目录文件：

在访问 Create React Doc 创建的文档时，页面渲染周期可分为首屏渲染阶段、衔接阶段、可交互阶段。

首屏渲染阶段: 以访问快速上手章节为例，当用户在浏览器输入 http://muyunyun.cn/create-react-doc/290a4219/ 时，gp-pages 服务会推送预先渲染好的页面，此时用户可以获得十分快速的首屏体验