ssr is an out-of-the-box server side rendering framework, building for frontend framework in Serverless scene.
This framework originated from egg-react-ssr and ssr v4.3( midway-faas + react ssr), making a lot of evolution compared with the previous version. Through plugin-in code components, it supports the combination of any backend framework and any frontend framework. Developers can deploy applications through either serverless or traditional Node.js. We focus on improving the development experiences of ssr applications and building a one-stop framework for development and deployment, which can also greatly reduce the costs for development and deployment.
In the latest v5.0, the framkework supports React and Vue2/Vue3 as server side rendering framework and Vite to improve the application's startup speed and HMR speed. It also provides one-click deployment to Serverless Cloud Function. With great confidence, we can say that it is the most advanced ssr framework on Earth. If you wish to get an out-of-the-box experience and on-click deployment, please use the ssr framework.
Read out Document to get a more detailed understanding. Actually the Document is developed with the ssr framework and deployed to AliCloud through Serverless.
ssr is currently used by the following companies(applications). If you are using but not listed below, please have an issue. Welcome to promote this framework, we will provide technical support at any time.
 优酷视频 |
 阿里影业娱乐宝 |
 Vmate短视频 |
 火炽星原CRM |
 牛牛搭 |
 希沃帮助中心 |
 腾讯微卡 |
 微脉 |
 腾讯手游助手 |
 国家现代农业科技创新中心 |
 部署于阿里云示例应用 |
 部署于腾讯云示例应用 |
国盛证券 |
三易科技 |
 极速二维码 |
 100教育 |
- 🌱 Easy to customize: support modern frontend frameworks such as React/Vue2/Vue3.
- 🚀 Out-of-the-box: 10+ built-in cli tools such as AntD、Vant、TS、Hooks.
- 🧲 Plug-in components: based on plugin-in architecture, users are more focused on business logic.
- 💯 Serverless first: one-click deployment to various Serverless platforms, also support traditional web server like Egg、Midway、Nest.
- 🛡 High availability: seamless degradation from SSR to CSR, the best disaster recovery plan.
- 😄 Rich functions: support building tools such as Webpack、Vite.
🚀 means functions already implemented
| milestone | status |
|---|---|
| Support the combination of any backend and frontend framework. (Serverless/Midway/NestJS) + (React/Vue2/Vue3) | 🚀 |
| Support vite as building tool in SSR scene how to use | 🚀 |
| Inplement server side rendering function lightly and beautifully | 🚀 |
| Restrict code package size in Serverless scene, minimize it of production environment | 🚀 |
| support both conventional routing and declarative routing | 🚀 |
| React: All in JSX, Vue: All in template. No traditional template engine, All parts(including html layout) are generated using JSX / Vue | 🚀 |
| Rendering mode switch: seamless degradation from SSR to CSR | 🚀 |
| Highly reusable: Unify the data acquisition methods of different frameworks | 🚀 |
| Type friendly: Full use of TypeScript | 🚀 |
| Seamless access to antd vant No configuration changes are required | 🚀 |
| Less is supported as CSS preprocessor | 🚀 |
| Support Code Segmentation scheme in React/Vue SSR. Excellent first page perfomance | 🚀 |
| Use useContext + useReducer in React to implement minimal data management, instead of traditional methods like redux/dva | 🚀 |
| Provide Provide/Inject for cross component communication in Vue3, instead of Vuex | 🚀 |
| Support usage in AliCloud | 🚀 |
ssr deploy one-click deployment to AliCloud |
🚀 |
ssr deploy --tencent one-click deployment toTencent Cloud without any configuration |
🚀 |
We provide create-ssr-app cli. Users can quickly create different types of applications.
Now we provide the following templates to developers. You choose any one according to your own technology stack.
Although the technologies are different, the development ideas are consistent. In any combination of technology stacks, our development commands, construction commands and rendering principles are completely consistent.
Note: We provide one-click deployment to Serverless platform in both Midway.js and Nest.js but the underlying implementation is slightly different. For more details please read Serverless. If you need to make extensive use of the capabilities provided by the framework, we recommend creating an application of type 'middle.js'. Reading our Document is strongly recommended to get a more detailed understanding.
- nestjs-react-ssr
- nestjs-vue-ssr
- nestjs-vue3-ssr
- nestjs-vue3-ssr-pinia
- midway-react-ssr
- midway-vue-ssr
- midway-vue3-ssr
Developers can create different types of applications according to the actual technology stack to start quickly.
We can create any of the above templates using npm init
$ npm init ssr-app my-ssr-project
$ cd my-ssr-project
$ npm install # don't use cnpm
$ npm start
$ open https://localhost:3000 # Access the app
$ npm run build # Resource construction, equivalent to npx ssr build
$ npm run start:vite # Start in Vite mode，equivalent to npx ssr start --vite
Check the links below to preview Serverless applications which are deployed using this framework to AliCloud/TencentCloud.
Use queryParams csr=true to degrade from SSR to CSR, also can be configured through config.js.
- https://ssr-fc.com/ React SSR App in AliCloud
- https://ssr-fc.com?csr=true React SSR App in AliCloud, CSR mode
- https://tx.ssr-fc.com React SSR App in TencentCloud
- https://tx.ssr-fc.com?csr=true React SSR App in TencentCloud, CSR mode
- https://vue.ssr-fc.com Vue SSR App in AliCloud
- https://vue3.ssr-fc.com Vue3 SSR App in AliCloud
- https://vue.ssr-fc.com?csr=true Vue SSR App in AliCloud, CSR mode
- https://vue3.ssr-fc.com?csr=true Vue3 SSR App in AliCloud, CSR mode
| Project | Status | Description |
|---|---|---|
| ssr |  |
cli for ssr framework |
| ssr-core-vue |  |
core render for vue |
| ssr-core-react |  |
core render for react |
| ssr-plugin-midway |  |
provide start and build fetature by [email protected] |
| ssr-plugin-nestjs |  |
provide start and build feature by NestJS |
| ssr-plugin-react |  |
develop react application only be used in development |
| ssr-plugin-vue |  |
develop vue2 application only be used in development |
| ssr-plugin-vue3 |  |
develop vue3 application only be used in development |
| ssr-server-utils |  |
server utils in Node.js environment |
| ssr-client-utils |  |
client utils in browser environment |
| ssr-hoc-react |  |
provide hoc component for react |
| ssr-hoc-vue3 |  |
provide hoc component for vue3 |
| ssr-types |  |
provide common types |
| ssr-webpack |  |
start local server and build production bundle by webpack |
If you want to contribute code to this project, please read contributing, we have rich scripts for you to bootstrap.
Although we have tried our best to check the application, there may still be some omissions. If you find any problems or suggestions during use, welcome to give issue or PR. Welcome to scan the code to join DingDing group or WeChat group
