Repository files navigation

Thessr framework version7.x has been released. Read thedocumentation for more detailed introduction and upgrade guide. Version 7 brings the following new features:

• SupportsRspack,Rolldown-Vite, andWebpack 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 latestcreate-ssr-app to initialize v7 (recommended) or v6 project templates according to prompts.

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

Thessr 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 thedocumentation.

This framework evolved from theegg-react-ssr project andssr 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 viaServerless or deploy as traditionalNode.js applications. We focus on improving the development experience of server-side rendering applications inServerless 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 supportsReact17/18/19 andVue2/Vue3 as frontend frameworks for server-side rendering. For development tools, we support bothVite|Webpack|Rspack to improve application startup speed, build speed, and HMR speed.

In theNode.js framework, the official defaultexample provides integration examples based onNest.js andMidway.js, two popularNode.js frameworks with thessr framework. Of course, thessr framework is designed not to be coupled with anyNode.js framework, and developers can freely choose to use anyNode.js framework.

If you chooseMidway.js as yourNode.js framework, you can directly use the built-inssr deploy command to deploy applications toAlibaba Cloud orTencent Cloud platforms with one click.

Read ourofficial documentation for more detailed understanding. In fact, the documentation itself is developed using thessr framework and deployed to Alibaba CloudServerless service.

• Need to use in scenarios combiningNode.js with frontend frameworks. Unlike other pure frontend frameworks, thessr framework is specifically built for server-side rendering scenarios or scenarios combiningNode.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. Thessr framework has the clearest rendering logic and application build logic among similar frameworks.
• May change technology stacks, such as upgrading fromVue2 toVue3, downgrading fromVue3 toVue2, or switching betweenReact/Vue.
• Need out-of-the-box support for popular UI libraries likeantd andvant in server-side rendering scenarios.
• Need to support bothWebpack andVite development tools to get fast startup speed, HMR speed, and stable production code.
• Need to usepinia as data management solution inVue3 SSR.
• Simply need a faster and bettercra orvue-cli. Thessr framework also provides excellent support in purecsr scenarios.

Companies (applications) currently using this project. If you are using it but not listed, please raise anissue. 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 likePinia,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 modesSSR|CSR|SSG|Html
• ✨ Supportsbun as js runtime

🚀 indicates implemented features

Why choose thessr framework and comparison with similar frameworks, please check thedocumentation

We provide thecreate-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: InMidway.js andNest.js scenarios, we have implemented one-click deployment toServerless platforms. However, the underlying implementations differ slightly. For more detailed introduction, please read theServerless chapter. If you need to extensively use capabilities provided byServerless platforms, we recommend creatingMidway.js type applications. We strongly recommend reading ourofficial 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 thenpm 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 queryParamscsr=true to degrade SSR server-side rendering mode to CSR client-side rendering mode with one click, or configure throughconfig.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 bymidway@2.0
ssr-plugin-nestjs		provide start and build feature byNestJS
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 thecontributing 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 raiseissues orPRs.

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