ssr v7 Version Introduction

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

• Simultaneously support Rspack, Rolldown-Vite, and Webpack 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 latest create-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 is webpack. 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

In config.ts file configuration, the vite scenario configuration is completely consistent between v6 and v7. You only need to consider whether the vite plugins used by the current project can work normally in Rolldown-Vite.

The configurations used in webpack scenarios and rspack scenarios are almost shared. For example, both use chainBaseConfig, chainClientConfig, and chainServerConfig to modify build configurations. Developers can manually declare through generics whether the type that chain specifically uses is webpack-chain or rspack-chain. The default is a union type of both.

For example, after specifying the generic type as rspack 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 in rspack scenarios, following official best practices, we removed css-loader, postcss-loader, and file-loader and other related build logic. In default scenarios, the ssr framework in rspack mode only registers less-loader processing logic. Other scenarios use rspack’s built-in asset logic to handle. If developers have other needs that require integrating postcss-loader logic, such as needing to use tailwindcss, they need to add these build logics themselves through chain. You can refer to this tutorial Using tailwind.css.

Currently, the documentation about v7 is still relatively limited. If you encounter any problems, welcome to submit issues or PRs 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.