开源自撸一站式SSR服务器渲染框架，同时支持React与Vue-烟雨网

说到SSR服务器渲染，大概都会想到next.js或者nuxt.js，它们一个支持React，一个支持Vue。那么能不能撸一款同时支持 React 和 Vue 的简单的SSR框架呢？

当然可以，React和Vue都基于JS运行时，都是MVVM框架，都秉承UI=render(state)，都支持所谓的“脱水”与“混水”，所以只要在末端做好统一的适配层，完全可以使用一个基础框架来兼容二者。

首屏SSR服务器渲染+交互CSR浏览器渲染

我们需要的当然不只是简单的服务器渲染，如果每次路由变化都需服务器渲染返回，那不是又退回到了用户体验糟糕的Web1.0时代了。所以我们需要的只是在用户首次访问的时候SSR，后面的交互和路由变化都是CSR。提供对搜索引擎友好的SEO的同时，也能提供与SPA一致的交互体验，并可以减轻服务器的渲染负载。

简单来说，就是搜索引擎来爬的时候可以SSR，用户用鼠标点的时候可以CSR…

在线Demo地址

废话不多说，先提供一个在线Demo地址：http://h5-ssr.eluxjs.com

如果不特别说明，你可能认为这是一个SPA单页应用，但是你可以点击浏览器的查看源代码验证一下，看是否生成了Html代码。

说说Feature

支持React、Vue
支持CSR、SSR、SSR+CSR
支持SSG静态页面生成
集成状态管理
支持虚拟路由、虚拟Page
支持路由Keepalive （Vue系的都懂，React系也可以享受该福利了）
无任何路由规则约束 （吐槽一下next/nuxt）
用过next.js或者nuxt.js的人都知道，他们对路由规则是有规范和要求的，这是一把双刃剑，如果按它们的规则走省时省力，如果想玩点花样则很麻烦。
实现真正意义上的前后端同构 （吐槽一下next/nuxt）
next.js或者nuxt.js都没实现真正意义上的同构，渲染页面无非就是分2步：1.获取数据(API)，2.渲染页面。然而它们在SSR和CSR中获取数据的逻辑和代码其实是2套， CSR中写好的逻辑和代码在SSR中，还需要用getInitialProps/getStaticProps/getServerSideProps专门为Server另写一套，何来同构之说？

说说缺点

生态和完善度肯定不能和next.js或者nuxt.js相提并论
SSR性能不及它们，个人以为：
- 使用React或Vue来做服务器渲染本身就不是一个高性能的方案，更在意的是同构。
- 如果你最终是要生成SSG静态页面，那么SSR只是开发模式，性能也无足轻重了。
不支持React18中的Suspense，这其实还是性能优化问题。我们之所以要使用SSR服务器渲染，无非是2大原因：
- 让搜索引擎可以搜索到（SEO）
- 提高首屏用户体验（性能）
  而大部分实际业务诉求都只是第一点。