The ssr framework version 7.x has been released. Read the documentation for more detailed introduction and upgrade guide. Version 7 brings the following new features:

• Supports Rspack, Rolldown-Vite, and Webpack build tools to greatly improve build performance.
• Supports any frontend framework combined with any build tool
• Brand new dependency design, streamlined dependencies required for initialization
• Progressive upgrade with almost no breaking changes, v6 projects can smoothly transition to v7

Version 7 has been tested to improve build speed by 5-10 times. Dependency size reduced by 2/3 (when using Rspack|Rolldown-Vite scenarios).

Use the latest create-ssr-app to initialize v7 (recommended) or v6 project templates according to prompts.

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

The ssr framework is an out-of-the-box server-side rendering framework built for frontend frameworks in server-side rendering scenarios. To understand what server-side rendering is, please check the documentation.

This framework evolved from the egg-react-ssr project and ssr v4 version (midway-faas + react ssr). Based on previous foundations, it has made many improvements through plugin-based code organization, supporting the combination of any server-side framework with any frontend framework. Developers can choose to deploy via Serverless or deploy as traditional Node.js applications. We focus on improving the development experience of server-side rendering applications in Serverless scenarios, creating one-stop development and application deployment services. This maximizes developer experience while minimizing application development and deployment costs.

In the latest version, it supports React17/18/19 and Vue2/Vue3 as frontend frameworks for server-side rendering. For development tools, we support both Vite|Webpack|Rspack to improve application startup speed, build speed, and HMR speed.

In the Node.js framework, the official default example provides integration examples based on Nest.js and Midway.js, two popular Node.js frameworks with the ssr framework. Of course, the ssr framework is designed not to be coupled with any Node.js framework, and developers can freely choose to use any Node.js framework.

If you choose Midway.js as your Node.js framework, you can directly use the built-in ssr deploy command to deploy applications to Alibaba Cloud or Tencent Cloud platforms with one click.

Read our official documentation for more detailed understanding. In fact, the documentation itself is developed using the ssr framework and deployed to Alibaba Cloud Serverless service.

• Need to use in scenarios combining Node.js with frontend frameworks. Unlike other pure frontend frameworks, the ssr framework is specifically built for server-side rendering scenarios or scenarios combining Node.js with frontend.
• Need an out-of-the-box server-side rendering capability without manually combining different frontend frameworks with server-side frameworks.
• Need framework-level rendering degradation capability that automatically degrades to client-side rendering when server-side rendering fails.
• Need a framework with simple configuration and clear logic. The ssr framework has the clearest rendering logic and application build logic among similar frameworks.
• May change technology stacks, such as upgrading from Vue2 to Vue3, downgrading from Vue3 to Vue2, or switching between React/Vue.
• Need out-of-the-box support for popular UI libraries like antd and vant in server-side rendering scenarios.
• Need to support both Webpack and Vite development tools to get fast startup speed, HMR speed, and stable production code.
• Need to use pinia as data management solution in Vue3 SSR.
• Simply need a faster and better cra or vue-cli. The ssr framework also provides excellent support in pure csr scenarios.

Companies (applications) currently using this project. If you are using it but not listed, please raise an issue. We welcome promotion and sharing, and will provide technical support at any time.

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

• 🌱　Extremely customizable: Frontend supports modern Web frameworks like React17/React18/Vue2/Vue3;
• 🚀　Ready to use: Built-in 10+ scaffold extensions like Pinia, antd, vant, TypeScript, Hooks, etc.;
• 🧲　Plugin-driven: Based on plugin architecture, users focus more on business logic;
• 💯　Serverless-first: One-click deployment to various Serverless platforms, also supports traditional Web Servers like Egg, Midway, Nest, etc.
• 🛡　High availability scenarios, seamless degradation from SSR to CSR, best disaster recovery solution.
• 😄　Feature-rich, build tools support both Webpack/Vite, supports four rendering modes SSR|CSR|SSG|Html
• ✨ Supports bun as js runtime

🚀 indicates implemented features

Why choose the ssr framework and comparison with similar frameworks, please check the documentation

We provide the create-ssr-app scaffold to let users quickly create different types of applications.

Currently, the official provides the following types of templates for developers to use directly. Users can choose different templates for development based on their actual technology stack.

Although the technology stacks are different, the development philosophy is consistent. In any technology stack combination, our development commands, build commands, and rendering principles are completely consistent.

Note: In Midway.js and Nest.js scenarios, we have implemented one-click deployment to Serverless platforms. However, the underlying implementations differ slightly. For more detailed introduction, please read the Serverless chapter. If you need to extensively use capabilities provided by Serverless platforms, we recommend creating Midway.js type applications. We strongly recommend reading our official documentation for more detailed understanding.

• 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

Developers can create different types of applications according to their actual technology stack needs to get started quickly.

Through the npm init command, we can create any of the above templates:

$ npm init ssr-app my-ssr-project
$ cd my-ssr-project
$ yarn # recommend using yarn, can also use npm install
$ yarn start
$ open http://localhost:3000 # access the application
$ yarn build # resource build, equivalent to npx ssr build
$ yarn start:vite # start in vite mode, equivalent to npx ssr start --tools vite

Preview application details deployed to Alibaba Cloud/Tencent Cloud services through Serverless one-click deployment by visiting the following links. Use queryParams csr=true to degrade SSR server-side rendering mode to CSR client-side rendering mode with one click, or configure through config.js.

• http://ssr-fc.com/ React SSR application deployed to Alibaba Cloud
• http://ssr-fc.com?csr=true React SSR application deployed to Alibaba Cloud, accessed in CSR mode
• http://tx.ssr-fc.com React SSR application deployed to Tencent Cloud
• http://tx.ssr-fc.com?csr=true React SSR application deployed to Tencent Cloud, accessed in CSR mode
• http://vue.ssr-fc.com Vue SSR application deployed to Alibaba Cloud
• http://vue3.ssr-fc.com Vue3 SSR application deployed to Alibaba Cloud
• http://vue.ssr-fc.com?csr=true Vue SSR application deployed to Alibaba Cloud, accessed in CSR mode
• http://vue3.ssr-fc.com?csr=true Vue3 SSR application deployed to Alibaba Cloud, accessed in CSR mode

Project	Status	Description
ssr		cli for ssr framework
ssr-core		core render for all framwork
ssr-plugin-midway		provide start and build fetature by midway@2.0
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-common-utils		common utils in Node.js environment and browser
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 application, please read the contributing documentation. We have prepared rich scripts for bootstrapping.

MIT

Although we have tried our best to check the application, there may still be omissions. If you find any problems or suggestions during use, welcome to raise issues or PRs.

Note: Due to WeChat group size limitations, to join the group please add the personal QR code and note "join ssr communication group". Since it's a personal WeChat, friends will be deleted after being added to the group, please understand. We encourage communication through issues and discussions more.

If this project can help you, we hope to receive your donation ☕️ to contribute to the open source community.

$ 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
-------------------------------------------------------------------------------

How to Build a Comfortable and Efficient Frontend Development Environment