ssr 框架v5.0正式发布，首个同时支持 React/Vue 服务端渲染的框架，且支持以Serverless形式一键发布上云

yuuang
3,838 阅读6分钟

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

SSR


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

githubActions cypress download standardjs License Node

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，最佳容灾方案。

已实现的功能

🚀 表示已经实现的功能

里程碑状态
支持任意服务端框架与任意前端框架的组合使用。(Serverless/Midway/Nest) + (React/Vue)🚀
最小而美的实现服务端渲染功能🚀
针对Serverless 场景对代码包的大小的严格限制，将生产环境的代码包大小做到极致🚀
同时支持约定式前端路由和声明式前端路由🚀
React 场景下 All in JSX，抛弃传统模版引擎，所有部分包括 layout 布局皆使用 JSX 来编写生成🚀
渲染模式切换：服务端渲染一键降级为客户端渲染🚀
统一服务端客户端的数据获取方式🚀
类型友好，全面拥抱 TS🚀
支持无缝接入 antd 无需修改任何配置🚀
支持使用 less 作为 css 预处理器🚀
实现 React/Vue SSR 场景下的优秀代码分割方案 首屏性能做到极致🚀
React 场景下使用 useContext + useReducer 实现极简的数据管理，摒弃传统的 redux/dva 等数据管理方案🚀
支持在阿里云 云平台创建使用🚀
ssr deploy 一键部署到阿里云平台🚀
ssr deploy --tencent 无需修改任何配置一键部署到腾讯云平台🚀
支持 vite + vue3 在 SSR 场景下的组合使用

与 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 来进行配置。

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 访问链接获取完整的项目描述信息

avatar
文章
阅读
粉丝