ssr 框架v5.0正式发布，首个同时支持 React/Vue 服务端渲染的框架，且支持以Serverless形式一键发布上云
发布于 4 年前 作者 zhangyuang 3224 次浏览 来自 分享

仓库地址：https://github.com/ykfe/ssr 访问链接获取完整的项目描述信息 SSR A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server

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 场景下的[优秀代码分割方案](张宇昂：SSR 场景下代码分割的最佳策略) 首屏性能做到极致 🚀
React 场景下使用 useContext + useReducer 实现极简的数据管理，摒弃传统的 redux/dva 等数据管理方案 🚀
支持在阿里云 [云平台](张宇昂：结合阿里云云开发平台，全程上云开发Serverless SSR应用)创建使用 🚀
ssr deploy 一键部署到阿里云平台 🚀
ssr deploy --tencent 无需修改任何配置一键部署到[腾讯云](腾讯云 - 产业智变 云启未来)平台 🚀
支持 [vite](vite 源码分析) + vue3 在 SSR 场景下的组合使用

线上案例

通过访问以下链接来预览该框架通过 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 框架具有哪些强大的能力，如果你想详细的了解应用的运行机制以及使用细则，建议访问仓库地址以获得更加详细的信息。也可以扫码加入我们的钉钉交流群实时获得最新信息。

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

1 回复

A most advanced ssr framework on Earth， 牛逼

回到顶部