<div> <a href="./README_Zh.md">简体中文</a> ｜ English </div> <h1 align="center"> SSR </h1> <div align="center"> <img src="https://gw.alicdn.com/tfs/TB1ckATCGL7gK0jSZFBXXXZZpXa-540-540.jpg" width="300" /> </div> <div align="center"> A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server. </div> <div align="center"> <a href="https://github.com/zhangyuang/ssr/actions" target="_blank"><img src="https://github.com/zhangyuang/ssr/workflows/CI/badge.svg" alt="githubActions" /> <a href="https://www.cypress.io/" target="_blank"><img src="https://img.shields.io/badge/cypress-dashboard-brightgreen.svg" alt="cypress" /> <a href="https://github.com/zhangyuang/ssr" target="_blank"><img src="https://img.shields.io/badge/node-%3E=20-green.svg?color=4dc71f" alt="Node" ></a> <a href="https://github.com/zhangyuang/ssr" target="_blank"><img src="https://img.shields.io/github/stars/zhangyuang/ssr.svg?color=4dc71f" alt="Node" ></a> </div>

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.

<table> <tr> <td align="center"><a target="_blank" href="http://youku.com/"><img src="https://img.alicdn.com/tfs/TB17DTuXkH0gK0jSZPiXXavapXa-680-133.svg" width="120"/> 优酷视频 </td> <td align="center" style="width: 120px; "><a target="_blank" href="#"><img src="https://wxa-shop-1258344707.cos.ap-shanghai.myqcloud.com/test/cdn/c8e49fda-d8ef-4332-a2c0-8c9e571883f5.jpeg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDtb4HEuJSLyJNCk11kCNHvIPGp8AvQfdK%26q-sign-time%3D1653378495%3B4294967040%26q-key-time%3D1653378495%3B4294967040%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D2d09dc5ceec264a030da16b747477adf0ae5b647 " width="120"/> 微信公众平台 </a></td> <td align="center" style="height: 100px"><a href="#" target="_blank"><img src="https://res.wx.qq.com/op_res/wy4vvtyfqW8HjIfBKjba6TNEFBHuAApjJ1FjSQ37OVIdIYtylmiBm2ZeJ79SRtmT4IipU69bDNDw0Rrdnjd9yg " width="200px; margin: 20px 0" /> <a href="#" target="_bvlank">腾讯体育 </a></td> <td align="center" style="height: 100px"><a href="#" target="_blank"><img src="https://res.wx.qq.com/op_res/qc0sXfbvOvZFKVaDy9OLsqHfwHg6U4AemN2MP6YUxEo0EWpK6RyRcj70bIf3GEg5y_WA1wuv4HcfYi2FP7Awkw " width="200px; margin: 20px 0" /> <a href="#" target="_bvlank">QQ会员 </a></td> <td align="center" style="height: 100px"><a href="https://m.film.qq.com/x/tva-vip-center/" target="_blank"><img src="https://res.wx.qq.com/op_res/x7sWI9AfUK1QwH0EDhKp4e_bGWxYOQ_1RlZqBFy9JntJzaE4aRzNhVgmxLNloAFpSQ-mBr9X9pux3QlV9QHHvQ" width="200px; margin: 20px 0" /> <a href="https://m.film.qq.com/x/tva-vip-center/" target="_bvlank">腾讯视频 </a></td> <td align="center"><a href="https://www.niuniuda.com/mall" target="_blank"><img src="https://img.alicdn.com/tfs/TB1df_8pBr0gK0jSZFnXXbRRXXa-160-60.png" width="120" alt="牛牛搭"/> <a href="https://www.niuniuda.com/mall" target="_blank">牛牛搭 </a></td> <td align="center"><a href="https://www.gszq.com/" target="_blank"><img src="https://www.gszq.com/static/media/icon-slogan.4d1c7974.png " width="120"/> <a href="https://www.gszq.com/" target="_bvlank">国盛证券 </a></td> <td align="center"><a href="https://m.isle.org.cn" target="_blank"><img src="https://res.wx.qq.com/op_res/qzBjcpT1AZDopDDkEJfj5gKFADotYHTgD33lz9xvZUIj7VJaIR_8HE4lfOxwaiYBgi4V2xXm0xLmAcdQxF4IrQ" width="120" alt="三易科技"/> <a href="https://m.isle.org.cn" target="_bvlank">三易科技 </a></td> <td align="center"><a href="https://wecard.qq.com/index/" target="_blank"><img src="https://img.alicdn.com/tfs/TB1pTZGrFT7gK0jSZFpXXaTkpXa-164-164.jpg" width="120"/> <a href="https://wecard.qq.com/index/" target="_blank">腾讯微卡 </a></td> </tr> <tr> <td align="center"><a href="https://syzs.qq.com/" target="_blank"><img src="images/syzs.png" width="120" alt="腾讯手游助手"/> <a href="https://syzs.qq.com/" target="_bvlank">腾讯手游助手 </a></td> <td align="center"><a href="https://kcmall.b2bwings.com/home" target="_blank"><img src="https://img.alicdn.com/imgextra/i1/O1CN01P7CAop1h7qQ3noefa_!!6000000004231-2-tps-211-79.png" width="120" alt="国家现代农业科技创新中心"/> <a href="https://kcmall.b2bwings.com/home" target="_bvlank">国家现代农业科技创新中心 </a></td> <td align="center"><a target="_blank" href="http://ssr-fc.com/"><img src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png" width="120"/> 部署于阿里云示例应用 </a></td> <td align="center"><a target="_blank" href="http://tx.ssr-fc.com/"><img src="http://s0.60logo.com/uploads/items/images/soft/180126/tengxunyun.svg" width="120"/> 部署于腾讯云示例应用 </a></td> <td align="center"><a href="https://www.100.com/" target="_blank"><img src="https://oss.bs2dl.100.com/hippo/config/f13ee98cfca7ce13888752c1261081b44bd356fd.png" width="120" /> <a href="https://www.100.com/" target="_bvlank">100教育 </a></td> <td align="center" style="height: 100px"><a href="https://blog.dreamer2q.wang/" target="_blank"><img src="https://res.wx.qq.com/op_res/MxxGgjPFRiTgjiReUefs2aMce-SgNvxxTB9U87YYhcOu6KPw9er7r2Lc0ne-b90nFstTUpc8REDwpxfUreKV1g" width="200px; margin: 20px 0" alt="Dream2qBlog"/> <a href="https://blog.dreamer2q.wang/" target="_bvlank">个人博客 </a></td> <td align="center" style="height: 100px"><a href="https://jiawu.dewu.

Ssr

Install / Use

README

Version 7.x

Introduction

When Should You Choose the SSR Framework

Who's Using