Skip to content

Commit c575dba

Browse files
hi-ogawaclaudedai-shi
authored
docs: add blog post for @vitejs/plugin-rsc migration (#1564)
This PR adds a blog post to accompany with #1493. Used lots of AI 😅 --------- Co-authored-by: Claude <[email protected]> Co-authored-by: Daishi Kato <[email protected]>
1 parent 0572564 commit c575dba

File tree

2 files changed

+111
-0
lines changed

2 files changed

+111
-0
lines changed
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
slug: migration-to-vite-plugin-rsc
3+
title: Migration to @vitejs/plugin-rsc
4+
description: Waku adopts Vite's official RSC plugin and Environment API as its foundation.
5+
author: hiroshi
6+
release: v0.24
7+
date: 2025/08/05
8+
---
9+
10+
Waku has migrated to use Vite's official plugin [`@vitejs/plugin-rsc`](https://www.npmjs.com/package/@vitejs/plugin-rsc) for React Server Components bundler implementation. Through this plugin, Waku now adopts the [Vite Environment API](https://vite.dev/guide/api-environment.html), which provides a unified foundation for the multi-environment build system required for RSC integration. This migration simplifies internal architecture while providing users full access to the Vite plugin system and benefiting from the broader ecosystem.
11+
12+
Waku has pioneered RSC framework implementation on Vite and provided many insights for the official Vite plugin. Some core RSC functionalities have been incorporated into `@vitejs/plugin-rsc`, benefiting the entire Vite ecosystem.
13+
14+
While this migration required many changes for internal Vite development server integration, build pipeline and plugin architecture, core routing logic remains unchanged, preserving Waku's existing functionality. This is thanks to Waku's layered routing architecture where the higher level APIs (`fsRouter`, `createPages`, and `defineRouter`) are built up on the "minimal" API `defineEntries`.
15+
16+
## New features / Breaking Changes
17+
18+
### Custom Vite configuration
19+
20+
Custom Vite configuration support has been changed. Vite configuration can now be specified through the `vite` property in `waku.config.ts`. `@vitejs/plugin-rsc` provides three environments `client`, `ssr`, and `rsc` for fine-grained control over the configuration and plugin pipeline. See [Vite Environment API documentation](https://vite.dev/guide/api-environment.html) for more details.
21+
22+
_Before_
23+
24+
```ts
25+
// vite.config.ts
26+
import { defineConfig } from "vite";
27+
28+
export default defineConfig({ ... })
29+
```
30+
31+
```ts
32+
// waku.config.ts
33+
import { defineConfig } from "waku/config";
34+
35+
export default defineConfig({
36+
unstable_viteConfigs: { ... },
37+
})
38+
```
39+
40+
_After_
41+
42+
```ts
43+
// waku.config.ts
44+
import { defineConfig } from "waku/config";
45+
46+
export default defineConfig({
47+
vite: { ... }
48+
})
49+
```
50+
51+
_Example_
52+
53+
```ts
54+
// waku.config.ts
55+
import { defineConfig } from 'waku/config';
56+
57+
export default defineConfig({
58+
vite: {
59+
environments: {
60+
// environment-specific configurations.
61+
client: {
62+
build: {
63+
// disable client assets minification
64+
minify: false,
65+
},
66+
},
67+
ssr: {
68+
optimizeeDeps: {
69+
include: [
70+
// handle cjs package for SSR
71+
],
72+
},
73+
},
74+
rsc: {
75+
// ...
76+
},
77+
},
78+
plugins: [
79+
// custom plugins
80+
{
81+
name: 'my-custom-plugin',
82+
transform(code, id) {
83+
// e.g. transform only on `rsc` environment
84+
if (this.environment.name === 'rsc') {
85+
// ...
86+
}
87+
},
88+
},
89+
],
90+
},
91+
});
92+
```
93+
94+
### Transforming server packages
95+
96+
Previously Waku transformed all server packages on RSC module graph while externalizing all server packages SSR module graph during development. This has been changed to transform only React-related 3rd party packages on both server module graphs to be able to discover "use server" and "use client" inside the packages. Unrelated packages are kept externalizing for better package compatibility.
97+
98+
This change can cause a new error during SSR development if there's a CJS dependency (directly or transitively) used in client components. For example, `swr` (ESM) package uses `use-sync-external-store` (CJS) internally and the plugin will show a warning `"found non-optimized CJS dependency"`. Currently, this needs to be manually mitigated by configuring `optimizeDeps.include` such as `environments.ssr.optimizeDeps.include: ["swr"]`.
99+
100+
## Future
101+
102+
The migration to `@vitejs/plugin-rsc` unlocks several ecosystem opportunities. The standardized Environment API foundation paves the way for future integrations with deployment adapters like [`@cloudflare/vite-plugin`](https://www.npmjs.com/package/@cloudflare/vite-plugin).
103+
104+
This alignment with Vite's architecture positions Waku to benefit from future developments, such as [Rolldown](https://vite.dev/guide/rolldown.html) support to improve build performance. The unified approach also enables better third-party plugin integration and community-driven solutions that were challenging with the previous custom implementation.

packages/website/src/lib/get-author.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ export const getAuthor = (author: string): Author => {
2828
avatar: 'https://avatars.githubusercontent.com/u/26290074',
2929
url: 'https://tylur.dev',
3030
};
31+
case 'hiroshi':
32+
return {
33+
name: 'Hiroshi Ogawa',
34+
biography: 'Vitest & Vite team member',
35+
avatar: 'https://github.com/hi-ogawa.png',
36+
url: 'https://github.com/hi-ogawa',
37+
};
3138
default:
3239
return {
3340
name: ``,

0 commit comments

Comments
 (0)