ssr 框架 5.0 发布首个同时支持 React/Vue 服务端渲染的框架可通过 Serverless 一键发布

[zhangyuang]

仓库地址：github.com/ykfe/ssr 访问链接获取完整的项目描述信息 SSR

A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server.

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。 此框架脱胎于 egg-react-ssr 项目和 ssr v4.3 版本（ midway-faas + react ssr ），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。 在最新的 v5.0 版本中，同时支持 React 和 Vue 的服务端渲染框架，且提供一键以 Serverless 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 ssr 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 ssr 框架。 仓库地址：github.com/ykfe/ssr 访问链接获取完整的项目描述信息 Features

🌱　极易定制：前端支持 React/Vue 等现代 Web 框架； 🚀　开箱即用：内置 10+ 脚手架配套扩展，如 Antd 、TS 、Hooks 等； 🧲　插件驱动：基于插件架构，用户更加专注于业务逻辑； 💯　 Serverless 优先：一键发布到各种 Serverless 平台，也支持传统 Web Server，比如 Egg 、Midway 、Nest 等。 🛡　高可用场景，可无缝从 SSR 降级到 CSR，最佳容灾方案。

已实现的功能 🚀 表示已经实现的功能

与 next/nuxt 等框架的对比 详细的技术细节对比可以查看本人在 2020 年 Node.js party 上所做的分享，从 9 个技术细节方面与 next/nuxt/easy-team 等等框架的做法进行对比。

以下简单介绍一下比较显著的优点

轻量，核心源代码 2400 行 vs next.js 18w 行 vs nuxt.js 2w 行 接地气，在 SSR 场景使用 UI 框架是一件不简单的事情，我们内置对世界上最流行的 UI 框架 ant-design 的支持。无需用户做额外配置 没有传统模版引擎，多数开发者是都十分厌恶使用传统模版引擎且需要引入额外的库和学习成本。我们没有模版引擎，根据场景 All in JSX 或者 Vue template 来编写 html 布局 风格统一，无论是 React/Vue 运行的本质始终都是 js，我们在两种框架的 SSR 实现思路一模一样，实现代码的高度复用，使用本框架无论是从 React 切换成 Vue 或者反过来都十分轻易 功能丰富，UI 框架、代码分割、HMR 、TS 、Serverless 、SSR 降级 CSR 开发所需要的功能应有尽有 示例丰富，默认示例 cover 大多数真实线上应用场景，包含 服务端框架选择、前端调用 Node.js 接口的方式、前端页面路由跳转的数据获取，应用部署等所有功能用例在 example 中都有体现。 优先考虑 Serverless，我们为应用在 Serverless 场景使用做了诸多优化包括内置发布命令一键发布到多个平台，以及对 Serverless 场景下的代码包大小优化

线上案例 通过访问以下链接来预览该框架通过 Serverless 一键部署到阿里云 /腾讯云服务的应用详情。 通过使用 queryParams csr=true 来让 SSR 服务端渲染模式一键降级为 CSR 客户端渲染模式，也可以通过 config.js 来进行配置。

ssr-fc.com/ 部署到阿里云的 React SSR 应用 ssr-fc.com?csr=true 部署到阿里云的 React SSR 应用, 以 CSR 模式访问 tx.ssr-fc.com 部署到腾讯云的 React SSR 应用 tx.ssr-fc.com?csr=true 部署到腾讯云的 React SSR 应用, 以 CSR 模式访问 vue.ssr-fc.com 部署到阿里云的 Vue SSR 应用 vue.ssr-fc.com?csr=true 部署到阿里云的 Vue SSR 应用, 以 CSR 模式访问

Getting Start 迅速开始一个应用 环境准备 $ node -v # 建议版本>=v10.15.0 v12.16.1 复制代码 create-ssr-app 我们提供了 create-ssr-app 脚手架，可迅速创建不同类型的 example 。如无特殊需求，我们推荐创建 Serverless 类型的应用，可享受一站式的应用开发，部署能力。 $ npm init ssr-app my-ssr-project --template=serverless-react-ssr # 创建 React SSR 应用，可通过 Serverless 服务一键发布应用上云 $ npm init ssr-app my-ssr-project --template=serverless-vue-ssr # 创建 Vue SSR 应用，可通过 Serverless 服务一键发布应用上云 $ npm init ssr-app my-ssr-project --template=midway-react-ssr # 创建 React SSR 应用，基于 Midway Node.js 框架提供的能力以传统 Node.js 应用的形式部署 $ npm init ssr-app my-ssr-project --template=midway-vue-ssr # 创建 Vue SSR 应用，基于 Midway Node.js 框架提供的能力以传统 Node.js 应用的形式部署 复制代码 本地开发 $ npm i $ npm start # 等价于 ssr start $ open http://localhost:3000 复制代码 资源构建 $ npm run build # 等价于 ssr build $ GENERATE_ANALYSIS=true npm run build # 可视化生成构建产物 复制代码 发布上云 发布命令 $ npm run deploy # 支持发布多个平台默认发布到阿里云 等价于 ssr deploy $ npm run deploy:tencent # 发布到腾讯云 等价于 ssr deploy --tencent 复制代码 我们针对 Serverless 场景的代码包做了优化，将发布速度做到极致。

上述内容简单介绍了一下 ssr 框架具有哪些强大的能力，如果你想详细的了解应用的运行机制以及使用细则，建议访问仓库地址以获得更加详细的信息。也可以扫码加入我们的钉钉交流群实时获得最新信息。 仓库地址：github.com/ykfe/ssr 访问链接获取完整的项目描述信息

[weixiangzhe]

支持一下，好用的话，之后就用上了

[zhangyuang]

@weixiangzhe 欢迎使用