SSR

Version 7.x

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

Introduction

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.

When Should You Choose the SSR Framework

• 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.

Who's Using

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.

Features

• 🌱　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

Implemented Features

🚀 indicates implemented features

Solution Comparison

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

Quick Start

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.

Create Project

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

Live Examples

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

Ecosystem

CONTRIBUTING

If you want to contribute code to this application, please read the contributing documentation. We have prepared rich scripts for bootstrapping.

License

MIT

Q&A Group

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.

Project Donation

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

Lines of Code

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

Frontend Development Manual

How to Build a Comfortable and Efficient Frontend Development Environment

Project Star Growth Trend