ssr v7 Version Introduction

In thessr@v7 version, we bring the following new features:

• Simultaneously supportRspack,Rolldown-Vite, andWebpack three build tools to greatly accelerate build performance.
• Support any frontend framework combined with any build tool
• Brand new dependency design, streamlining the dependencies needed for initialization installation
• Progressive upgrade with almost no breaking changes, v6 projects can smoothly transition to v7

v7 version actual testing shows build speed can be improved by 5-10 times. Dependency volume is 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> npx> create-ssr-app my-ssr-project? Select ssr framework version (v6 or v7): › - Use arrow-keys. Return to submit.❯   v7(Recommend, Support Rspack, Rolldown-Vite, Webpack@4)    v6(Support Webpack@4, Vite@2)

Detailed Introduction

In v7, we split the build logic and related dependencies of different build tools into independent packages:

• ssr-vite
• ssr-rspack
• ssr-webpack

When developers create templates, they choose the corresponding build tool, and the generated modules will only contain dependencies for that build tool. Of course, developers can later add new build tools according to their needs at any time. They just need to install the corresponding dependencies.

At the same time, when starting commands, you need to specify the corresponding build tool. If not specified, the default iswebpack. The command format is as follows:

$ npx ssr start --tool rspack$ npx ssr build --tool vite

Upgrading from v6

Based on personal experience, upgrading from v6 default templates requires almost no changes. If the current project’s custom configuration is strongly bound to the build tool used by v6, some configuration modifications may be needed.

Dependency Version Upgrade

First, you need to upgrade all ssr framework-related dependencies to v7 versions.

"dependencies": {  "ssr-common-utils": "^7.0.0",  "ssr-core": "^7.0.0",},"devDependencies": {  "ssr": "^7.0.0",  "ssr-plugin-midway": "^7.0.0",  "ssr-plugin-react": "^7.0.0",  "ssr-types": "^7.0.0"}

Then, according to your needs, choose the appropriate build tool dependencies to add:

"ssr-webpack": "^7.0.0","ssr-rspack": "^7.0.0","ssr-vite": "^7.0.0",

Next, replace the startup commands:

$ npx ssr start --tool rspack$ npx ssr build --tool vite#v6 version startup command is ssr start --vite.v7 has been deprecated

Inconfig.ts file configuration, thevite scenario configuration is completely consistent between v6 and v7. You only need to consider whether thevite plugins used by the current project can work normally inRolldown-Vite.

The configurations used inwebpack scenarios andrspack scenarios are almost shared. For example, both usechainBaseConfig,chainClientConfig, andchainServerConfig to modify build configurations. Developers can manually declare through generics whether the type thatchain specifically uses iswebpack-chain orrspack-chain. The default is a union type of both.

For example, after specifying the generic type asrspack like below, syntax like.type('css') won’t cause type errors:

import type { UserConfig }from'ssr-types'const userConfig: UserConfig<'rspack'> = {chainBaseConfig:(config) => {config.module.rule('js').test(/\.css$/).type('css')}}export { userConfig }

The main difference is that inrspack scenarios, following official best practices, we removedcss-loader,postcss-loader, andfile-loader and other related build logic. In default scenarios, thessr framework inrspack mode only registersless-loader processing logic. Other scenarios userspack’s built-inasset logic to handle. If developers have other needs that require integratingpostcss-loader logic, such as needing to usetailwindcss, they need to add these build logics themselves throughchain. You can refer to this tutorialUsing tailwind.css.

Currently, the documentation about v7 is still relatively limited. If you encounter any problems, welcome to submitissues orPRs to help us improve it together.

Our goal is to create the best and simplest-to-use SSR framework on Earth. If you feel this project is helpful to you, welcome to donate and make a contribution to the SSR framework.