简体中文｜ English

SSR

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

7.x 版本

ssr 框架 7.x 版本已发布，阅读文档获取更详细的介绍和升级指南。v7版本带来以下新的features

* 同时支持 Rspack , Rolldown-Vite, Webpack , 三种构建工具来极大的加快构建性能。
* 支持任意前端框架与任意构建工具结合使用
* 全新的依赖设计，精简初始化安装需要的依赖项
* 渐进式升级，几乎没有 breaking change, v6项目可平滑过渡到v7

v7 版本实测构建速度可提升5-10倍。依赖体积缩小2/3(使用 Rspack|Rolldown-Vite 的场景)。

使用最新的 create-ssr-app 来根据提示初始化v7(推荐)或v6的项目模版。

``bash $ npm init ssr-app@latest my-ssr-project`

`简介`

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看文档

此框架脱胎于 egg-react-ssr 项目和 ssr v4版本 （midway-faas + react ssr） ，在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。

在最新的版本中，同时支持 React17/18/19 和 Vue2/Vue3 作为服务端渲染的前端框架，开发工具侧我们同时支持了 Vite|Webpack|Rspack 来提升应用的启动速度，构建速度和 HMR 速度。

在 Node.js 框架中，官方默认的 example 提供了基于 Nest.js 和 Midway.js 这两个流行的 Node.js 框架与 ssr 框架集成示例。当然 ssr 框架在设计上不与任何 Node.js 框架耦合，开发者可以自由选择使用任何 Node.js 框架。

如果你选择的是 Midway.js 作为 Node.js 框架，那么可以直接使用内置的 ssr deploy 命令来一键部署应用到 阿里云 或 腾讯云 平台。

阅读我们的官方文档获得更加详细的了解。事实上文档本身便是用 ssr 框架开发并部署到阿里云 Serverless 服务。

![](https://res.wx.qq.com/op_res/B9tJE-lFR3gCif92sM4BeeqAcoJSZbJK-auM7MACgomrWm58C1moA3BfatZ5gS-tgZHYyk57e0JQRtgdcgho-g)

`什么情况下你应该选择 ssr 框架`

* 需要在 Node.js 与前端框架结合的场景使用，与其他纯前端的框架不同 ssr 框架是专为服务端渲染场景或者 Node.js与前端结合的场景打造的框架 * 需要一个开箱即用的服务端渲染能力，不需要手动去组合不同的前端框架与服务端框架之间的联系 * 需要框架层面的渲染降级能力，在服务端渲染出错时自动降级到客户端渲染 * 需要一个配置简单逻辑清晰的框架，ssr框架的渲染逻辑和应用构建逻辑是同类型框架中最清晰的 * 可能会改动技术栈，如从Vue2 升级为 Vue3，从 Vue3 降级为 Vue2 或 React/Vue互相切换 * 需要在服务端渲染场景下开箱即用使用antd vant 等流行 ui库 * 需要能够同时支持Webpack, Vite 两种开发工具，以便同时得到快速的启动速度 HMR速度以及稳定的生产环境代码 * 需要在Vue3 SSR使用 pinia 作为数据管理方案 * 只是单纯的需要一个更快更好用的cra 或 vue-cli, ssr 框架在纯 csr 场景的支持也十分优秀

`哪些应用在使用`

正在使用这个项目的公司(应用), 如果您正在使用但名单中没有列出来的话请提 issue，欢迎推广分享，我们将随时提供技术支持

_优酷视频	_{微信公众平台}	腾讯体育	QQ会员	腾讯视频	_牛牛搭	_国盛证券	_三易科技	_腾讯微卡
_{腾讯手游助手}	_{国家现代农业科技创新中心}	_{部署于阿里云示例应用}	_{部署于腾讯云示例应用}	_100教育	个人博客	得物	_微脉	_行动教育
HappyPC	HappyMobile	_{阿里影业娱乐宝}	_{Vmate短视频}	_{火炽星原CRM}	拍信创意	_{极速二维码}	_{希沃帮助中心}	_{经传多赢股票网}
_{中商全球图书采选平台}

`Features`

* 🌱　极易定制：前端支持 React17/React18/Vue2/Vue3 等现代Web框架； * 🚀　开箱即用：内置 10+ 脚手架配套扩展，如 Pinia、antd、vant、TypeScript、Hooks等； * 🧲　插件驱动：基于插件架构，用户更加专注于业务逻辑； * 💯　Serverless优先：一键发布到各种Serverless平台，也支持传统Web Server，比如Egg、Midway、Nest等。 * 🛡　高可用场景，可无缝从SSR降级到CSR，最佳容灾方案。 * 😄　功能丰富，构建工具同时支持 Webpack/Vite，支持四种渲染模式SSR|CSR|SSG|Html* ✨ 支持 bun 作为 js runtime

`已实现的功能`

🚀 表示已经实现的功能

| 里程碑 | 状态 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | | 支持任意服务端框架与任意前端框架的组合使用。(Serverless/Midway/NestJS) + (React17/React18/Vue2/Vue3) | 🚀 | | 最丝滑的 vite 支持 | 🚀 | | 最小而美的实现服务端渲染功能 | 🚀 | | 支持预渲染能力 | 🚀 | | 针对Serverless 场景对代码包的大小的严格限制，将生产环境的代码包大小做到极致 | 🚀 | | 同时支持约定式前端路由和声明式前端路由 | 🚀 | | 摒弃传统模版引擎，所有页面元素统一使用前端组件作为 DSL | 🚀 | | 同时支持四种渲染模式，提供服务端渲染一键降级为客户端渲染的能力 | 🚀 | | 统一不同框架服务端客户端的数据获取方式，做到高度复用 | 🚀 | | 类型友好，全面拥抱 TS | 🚀 | | 支持无缝接入 antd vant 无需修改任何配置 | 🚀 | | 支持使用 less 作为 css 预处理器 | 🚀 | | 微前端场景下无缝使用 | 🚀 | | 支持使用 context 或 valtio 实现极简的数据管理方案，摒弃传统的 redux/dva 等数据管理方案 | 🚀 | | Vue3 场景提供 Pinia 以及 Provide/Inject 代替Vuex进行跨组件通信 | 🚀 | | 支持在阿里云云平台创建使用 | 🚀 | | ssr deploy 一键部署到阿里云平台 | 🚀 | | ssr deploy --tencent 无需修改任何配置一键部署到腾讯云平台 | 🚀 |

`方案对比`

为什么要选择 ssr 框架以及与同类型框架的方案对比请查看文档

`快速开始`

我们提供了 create-ssr-app 脚手架来让用户可以迅速的创建不同类型的应用。

目前官方提供了以下类型的模版给开发者直接使用。用户可根据自己的实际技术栈选择不同的模版进行开发。

虽然技术栈不同但开发思想是一致的，在任何技术栈的组合中我们的开发命令, 构建命令以及渲染原理都是完全一致的

注意: 在 Midway.js Nest.js 场景下我们都已实现了一键部署到 Serverless 平台的能力。但底层实现略有差异。更加详细的介绍可以阅读 Serverless 章节。如需要大量使用 Serverless 平台提供的能力，我们建议创建 Midway.js 类型的应用。强烈建议阅读我们的官方文档来获得更加详细的了解

* nestjs-react-ssr * nestjs-react18-ssr * nestjs-vue-ssr * nestjs-vue3-ssr * nestjs-vue3-ssr-pinia * midway-react-ssr * midway-react18-ssr * midway-vue-ssr * midway-vue3-ssr

开发者可根据实际技术栈需要创建不同类型的应用快速开始

`$3`

通过 npm init 命令我们可以创建上述的任意模版

`bash $ npm init ssr-app my-ssr-project $ cd my-ssr-project $ yarn # 建议使用 yarn, 也可以 npm install $ yarn start $ open http://localhost:3000 # 访问应用 $ yarn build # 资源构建，等价于 npx ssr build $ yarn start:vite # 以 vite 模式启动，等价于 npx ssr start --tools vite`

![](images/start-vite3.gif)

`线上案例`

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

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

`生态系统`

| Project | Status | Description | | ------------------- | ------------------------------------------------ | ----------------------------------------------------------------------- | | [ssr] | [![ssr-status]][ssr] | cli for ssr framework | | [ssr-core] | [![ssr-core-status]][ssr-core] | core render for all framwork | | [ssr-plugin-midway] | [![ssr-plugin-midway-status]][ssr-plugin-midway] | provide start and build fetature by midway@2.0 | | [ssr-plugin-nestjs] | [![ssr-plugin-nestjs-status]][ssr-plugin-nestjs] | provide start and build feature by NestJS | | [ssr-plugin-react] | [![ssr-plugin-react-status]][ssr-plugin-react] | develop react application only be used in development | | [ssr-plugin-vue] | [![ssr-plugin-vue-status]][ssr-plugin-vue] | develop vue2 application only be used in development | | [ssr-plugin-vue3] | [![ssr-plugin-vue3-status]][ssr-plugin-vue3] | develop vue3 application only be used in development | | [ssr-common-utils] | [![ssr-common-utils-status]][ssr-common-utils] | common utils in Node.js environment and browser | | [ssr-hoc-react] | [![ssr-hoc-react-status]][ssr-hoc-react] | provide hoc component for react | | [ssr-hoc-vue3] | [![ssr-hoc-vue3-status]][ssr-hoc-vue3] | provide hoc component for vue3 | | [ssr-types] | [![ssr-types-status]][ssr-types] | provide common types | | [ssr-webpack] | [![ssr-webpack-status]][ssr-webpack] | start local server and build production bundle by webpack |

[ssr-status]: https://img.shields.io/npm/v/ssr.svg [ssr-core-status]: https://img.shields.io/npm/v/ssr-core.svg [ssr-hoc-react-status]: https://img.shields.io/npm/v/ssr-hoc-react.svg [ssr-hoc-vue3-status]: https://img.shields.io/npm/v/ssr-hoc-vue3.svg [ssr-common-utils-status]: https://img.shields.io/npm/v/ssr-common-utils.svg [ssr-plugin-midway-status]: https://img.shields.io/npm/v/ssr-plugin-midway.svg [ssr-plugin-nestjs-status]: https://img.shields.io/npm/v/ssr-plugin-nestjs.svg [ssr-plugin-react-status]: https://img.shields.io/npm/v/ssr-plugin-react.svg [ssr-plugin-vue-status]: https://img.shields.io/npm/v/ssr-plugin-vue.svg [ssr-plugin-vue3-status]: https://img.shields.io/npm/v/ssr-plugin-vue3.svg [ssr-webpack-status]: https://img.shields.io/npm/v/ssr-webpack.svg [ssr-types-status]: https://img.shields.io/npm/v/ssr-types.svg

[ssr]: https://github.com/zhangyuang/ssr/tree/dev/packages/cli [ssr-core]: https://github.com/zhangyuang/ssr/tree/dev/packages/core [ssr-hoc-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/hoc-react [ssr-hoc-vue3]: https://github.com/zhangyuang/ssr/tree/dev/packages/hoc-vue3 [ssr-plugin-midway]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-midway [ssr-common-utils]: https://github.com/zhangyuang/ssr/tree/dev/packages/utils [ssr-plugin-nestjs]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-nestjs [ssr-plugin-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-react [ssr-plugin-vue]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-vue [ssr-plugin-vue3]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-vue3 [ssr-types]: https://github.com/zhangyuang/ssr/tree/dev/packages/types [ssr-webpack]: https://github.com/zhangyuang/ssr/tree/dev/packages/webpack

`CONTRIBUTING`

如果你想为本应用贡献代码，请阅读贡献文档，我们为你准备了丰富的脚本用于 bootstrap

`License`

MIT

`答疑群`

虽然我们已经尽力检查了一遍应用，但仍有可能有疏漏的地方，如果你在使用过程中发现任何问题或者建议，欢迎提issue或者PR

注: 由于微信交流群人数限制，进群请添加私人二维码并备注进入 ssr 交流群，由于是私人微信，拉群后将会自行删除好友，敬请谅解。我们更加鼓励通过 issue 和 discussion 来交流问题

`项目捐赠`

如果本项目能够对你有所帮助，希望得到来自于你的捐赠 ☕️ 为开源社区做一份贡献

`代码行数`

`bash $ cloc packages --include-ext=ts 993 text files. 679 unique files. 829 files ignored.

github.com/AlDanial/cloc v 1.90 T=0.62 s (264.7 files/s, 9026.5 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- TypeScript 164 471 195 4927 ------------------------------------------------------------------------------- SUM: 164 471 195 4927 -------------------------------------------------------------------------------``

前端开发手册

如何打造舒适高效的前端开发环境

项目 Star 数增长趋势

![Stargazers over time](https://starchart.cc/zhangyuang/ssr)

简体中文｜ English

SSR

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

7.x 版本

ssr 框架 7.x 版本已发布，阅读文档获取更详细的介绍和升级指南。v7版本带来以下新的features

v7 版本实测构建速度可提升5-10倍。依赖体积缩小2/3(使用 Rspack|Rolldown-Vite 的场景)。

使用最新的 create-ssr-app 来根据提示初始化v7(推荐)或v6的项目模版。

``bash $ npm init ssr-app@latest my-ssr-project`

`简介`

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看文档

如果你选择的是 Midway.js 作为 Node.js 框架，那么可以直接使用内置的 ssr deploy 命令来一键部署应用到 阿里云 或 腾讯云 平台。

阅读我们的官方文档获得更加详细的了解。事实上文档本身便是用 ssr 框架开发并部署到阿里云 Serverless 服务。

![](https://res.wx.qq.com/op_res/B9tJE-lFR3gCif92sM4BeeqAcoJSZbJK-auM7MACgomrWm58C1moA3BfatZ5gS-tgZHYyk57e0JQRtgdcgho-g)

`什么情况下你应该选择 ssr 框架`

`哪些应用在使用`

正在使用这个项目的公司(应用), 如果您正在使用但名单中没有列出来的话请提 issue，欢迎推广分享，我们将随时提供技术支持

_优酷视频	_{微信公众平台}	腾讯体育	QQ会员	腾讯视频	_牛牛搭	_国盛证券	_三易科技	_腾讯微卡
_{腾讯手游助手}	_{国家现代农业科技创新中心}	_{部署于阿里云示例应用}	_{部署于腾讯云示例应用}	_100教育	个人博客	得物	_微脉	_行动教育
HappyPC	HappyMobile	_{阿里影业娱乐宝}	_{Vmate短视频}	_{火炽星原CRM}	拍信创意	_{极速二维码}	_{希沃帮助中心}	_{经传多赢股票网}
_{中商全球图书采选平台}

`Features`

`已实现的功能`

🚀 表示已经实现的功能

`方案对比`

为什么要选择 ssr 框架以及与同类型框架的方案对比请查看文档

`快速开始`

我们提供了 create-ssr-app 脚手架来让用户可以迅速的创建不同类型的应用。

目前官方提供了以下类型的模版给开发者直接使用。用户可根据自己的实际技术栈选择不同的模版进行开发。

虽然技术栈不同但开发思想是一致的，在任何技术栈的组合中我们的开发命令, 构建命令以及渲染原理都是完全一致的

* nestjs-react-ssr * nestjs-react18-ssr * nestjs-vue-ssr * nestjs-vue3-ssr * nestjs-vue3-ssr-pinia * midway-react-ssr * midway-react18-ssr * midway-vue-ssr * midway-vue3-ssr

开发者可根据实际技术栈需要创建不同类型的应用快速开始

`$3`

通过 npm init 命令我们可以创建上述的任意模版

![](images/start-vite3.gif)

`线上案例`

`生态系统`

`CONTRIBUTING`

如果你想为本应用贡献代码，请阅读贡献文档，我们为你准备了丰富的脚本用于 bootstrap

`License`

MIT

`答疑群`

虽然我们已经尽力检查了一遍应用，但仍有可能有疏漏的地方，如果你在使用过程中发现任何问题或者建议，欢迎提issue或者PR

`项目捐赠`

如果本项目能够对你有所帮助，希望得到来自于你的捐赠 ☕️ 为开源社区做一份贡献

`代码行数`

`bash $ cloc packages --include-ext=ts 993 text files. 679 unique files. 829 files ignored.

前端开发手册

如何打造舒适高效的前端开发环境

项目 Star 数增长趋势

![Stargazers over time](https://starchart.cc/zhangyuang/ssr)

ssr

SSR

7.x 版本

简介

什么情况下你应该选择 ssr 框架

哪些应用在使用

Features

已实现的功能

方案对比

快速开始

$3

线上案例

生态系统

CONTRIBUTING

License

答疑群

项目捐赠

代码行数

前端开发手册

项目 Star 数增长趋势

ssr

SSR

7.x 版本

简介

什么情况下你应该选择 ssr 框架

哪些应用在使用

Features

已实现的功能

方案对比

快速开始

$3

线上案例

生态系统

CONTRIBUTING

License

答疑群

项目捐赠

代码行数

前端开发手册

项目 Star 数增长趋势

Dist Tags

`简介`

`什么情况下你应该选择 ssr 框架`

`哪些应用在使用`

`Features`

`已实现的功能`

`方案对比`

`快速开始`

`$3`

`线上案例`

`生态系统`

`CONTRIBUTING`

`License`

`答疑群`

`项目捐赠`

`代码行数`

`简介`

`什么情况下你应该选择 ssr 框架`

`哪些应用在使用`

`Features`

`已实现的功能`

`方案对比`

`快速开始`

`$3`

`线上案例`

`生态系统`

`CONTRIBUTING`

`License`

`答疑群`

`项目捐赠`

`代码行数`