小而美的 egg-react-ssr 开源实现方案

原创

于 2020-04-21 10:23:33 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文基于优酷 PC/H5 业务改造的经验心得，提炼出了一套基础的 egg-react-ssr 服务端渲染应用开发的基础骨架。为了更好的对比 Next.js 以及市面上等其他各种实现方案，我提炼出了比较精华的几点优势。

小：实现方式简洁；
全：功能齐全，配套结合多种热门模块的 example；
美：基于 React 和 Eggjs 框架，拥有强大的插件生态，配置非黑盒，非常方便加入业务个性化逻辑。

项目地址：
https://github.com/ykfe/egg-react-ssr

一、快速开始

这里我们提供了一个脚手架，方便你创建快速项目。

$ npm install yk-cli -g
$ ykcli init <Your Project Name>
$ cd <Your Project Name>
$ npm i
$ npm start
$ open http://localhost:7001

二、特色

本应用的特色是实现方式简单优雅，相比于 Next.js 的代码非黑盒，让你清晰的了解 SSR(Server Side Render) 服务端渲染应用的执行流程，并且方便加入业务自定义需求。如果你需要更直接地控制应用程序的结构，Next.js Nuxt.js　并不适合这种使用场景。同时本应用最大的特色是可以实现 SSR/CSR（Client Side Render）的无缝切换，只需要通过修改配置文件，或者通过 Query 参数的方式，在线上应用流量过大或者服务端渲染过程中出现错误时，迅速降级为客户端渲染。

在实现方案上，我们抛弃了传统的模版引擎的做法，页面的一切元素包括基础 Html 骨架皆采用 jsx 的方式来编译生成而不需要使用 react-helmet 这种额外的库。

同时我们正在接入集团的 Ginkgo