Web框架前端后端【免费下载链接】waku⛩️ The minimal React framework项目地址https://gitcode.com/gh_mirrors/wa/waku点击查看免费下载本指南围绕 Waku 官方端到端示例rsc-css-modules位于 e2e/fixtures/rsc-css-modules展开讲解如何在纯 React Server ComponentsRSC场景、不开 SSR 的前提下用 CSS Modules 同时为服务端组件与客户端组件提供模块化、可作用域隔离的样式。读完本文你将掌握*.module.css的导入写法、use client边界两侧的样式组织方式、TypeScript 声明补充以及对应的端到端测试验证思路。示例定位Only RSC, No SSR该示例的 README 用一句话点明了它的定位Only RSC features, no SSR. Using css modules to style the application, both on server and client components.也就是说这个 fixture 是一个刻意收敛的场景只使用 RSC 能力、不启用 SSR专门用来验证 CSS Modules 在「服务端组件 客户端组件」两类组件中都能正常工作。它回答了一个 Waku 开发者常会遇到的问题同一个应用中既有 Server Component 又有 Client Component 时样式应该怎么组织、模块化 CSS 能否两端通用。从工程结构看示例应用由以下几个文件构成e2e/fixtures/rsc-css-modules/ ├── package.json ├── tsconfig.json ├── declaration.d.ts └── src/ ├── waku.server.tsx # 服务端入口处理 RSC 请求 ├── waku.client.tsx # 客户端入口水合 RSC 流 └── components/ ├── App.tsx # 服务端组件 ├── app.module.css ├── ClientCounter.tsx # 客户端组件use client └── clientCounter.module.css关键点在于这个 fixture 没有 waku.config.ts也没有任何自定义 CSS 插件配置——CSS Modules 开箱即用这正是 Waku 依托 Vite 构建体系带来的能力无需额外声明。服务端组件中的 CSS Modules 用法服务端组件App.tsxsrc/components/App.tsx采用标准的 CSS Modules 导入语法import styles from ./app.module.css; import { ClientCounter } from ./ClientCounter.js; const App ({ name }: { name: string }) { return ( html head titleWaku example/title /head body div>.wrapper { display: flex; flex-direction: column; } .text { font-size: 18px; color: blue; }这里有三点值得注意styles.wrapper/styles.text属于编译期安全的局部类名CSS Modules 会将类名作用域化生成带哈希的后缀避免全局污染styles对象上的每个属性都与 CSS 文件中定义的类一一对应。服务端组件同样可以放心使用 CSS ModulesApp是默认的 RSC无use client指令它只运行在服务端把className{styles.wrapper}写入产出的 RSC 流中客户端水合时类名保持一致因此样式可以两端同步生效。html/head/body由组件直接产出在 RSC 场景下文档骨架本身就是 React 组件树的一部分CSS Modules 类名附着在其子节点上。客户端组件中的 CSS Modules 用法交互组件ClientCounter.tsxsrc/components/ClientCounter.tsx通过use client指令标记为客户端组件同样直接导入 CSS Modulesuse client; import { useState } from react; import styles from ./clientCounter.module.css; export const ClientCounter () { const [count, setCount] useState(0); return ( div className{styles.counterWrapper}>.counterWrapper { display: flex; flex-direction: row; gap: 4px; } .counterButton { padding: 8px; }这个组件体现了 Waku 应用中「服务端/客户端组件各自就近携带样式」的组织范式ClientCounter作为App服务端组件的子组件通过 props 接收 RSC 传来的内容同时在客户端维护useState状态。它的样式与组件定义放在同一目录下模块化类名不会与其它组件冲突。一个值得留意的细节App.tsx中导入子组件时写的是./ClientCounter.js而不是./ClientCounter。这是因为项目 tsconfig 采用moduleResolution: bundler同时 RSC 运行时会按 JS 扩展名解析模块——这是 Waku/RSC 生态中常见的导入写法在遵循官方示例时建议保持一致。在 RSC 请求处理器中接线waku.server.tsx服务端入口 src/waku.server.tsx 使用默认适配器waku/adapters/default把App组件接到 RSC 请求处理流程上import adapter from waku/adapters/default; import App from ./components/App.js; export default adapter({ handleRequest: async (input, { renderRsc }) { if (input.type rsc) { return renderRsc({ App: App name{input.rscPath || Waku} / }); } if (input.type call) { const value await input.fn(...input.args); return renderRsc({}, { value }); } return fallback; }, handleBuild: async () {}, });这里可以看到 Waku minimal 模式的请求分发逻辑input.type rsc处理页面/组件渲染请求调用renderRsc({ App: App name{...} / })生成 RSC 流input.type call处理客户端发起的「调用」例如 Client Component 触发的服务端 action返回调用结果其余请求返回fallback。App接收的name参数来自input.rscPath默认值为Waku——这正是页面上data-testidapp-name元素渲染出的文本。CSS Modules 在这个流程中不参与任何服务端逻辑判断它只是在组件渲染时被正常解析Waku 会把样式产物与 RSC 流一同交付给客户端。客户端水合入口waku.client.tsx客户端入口 src/waku.client.tsx 使用 Waku minimal 客户端 APIimport { StrictMode } from react; import { createRoot } from react-dom/client; import { unstable_defaultRootOptions as defaultRootOptions } from waku/client; import { Root_UNSTABLE as Root, Slot_UNSTABLE as Slot, } from waku/minimal/client; const rootElement ( StrictMode Root Slot idApp / /Root /StrictMode ); createRoot(document, defaultRootOptions).render(rootElement);Slot idApp /是 RSC 流的挂载点服务端渲染出的App组件树包括它产出的带 CSS Modules 类名的 DOM 结构会在这里水合。Root/Slot来自waku/minimal/client是 Waku 面向最小化 RSC 场景提供的客户端运行时 API注意其_UNSTABLE后缀接口仍在演进中。TypeScript 支持为*.module.css补充模块声明CSS Modules 默认导入在 TypeScript 中无法直接推断类型因此 fixture 提供了 declaration.d.tsdeclare module *.module.css;这一行全局声明告诉 TypeScript「任何以.module.css结尾的模块都存在」从而让import styles from ./app.module.css通过类型检查。结合 tsconfig.json 的配置strict: true、moduleResolution: bundler、jsx: react-jsx示例项目无需任何自定义 CSS 类型插件即可编译。若你的 Waku 项目是 TypeScript 模板建议在src或项目根目录加入类似的declare module *.module.css;或直接使用vite/client类型否则 CSS Modules 导入会报「找不到模块」的类型错误。运行与验证dev / build / start 与端到端测试package.jsone2e/fixtures/rsc-css-modules/package.json提供了三个标准脚本scripts: { dev: waku dev, build: waku build, start: waku start }依赖方面使用react ~19.3.0、react-dom ~19.3.0、react-server-dom-webpack ~19.3.0框架本体为waku: latest开发期依赖typescript ^6.0.3。在 fixture 目录下执行pnpm install后可用pnpm dev启动开发服务器验证样式用pnpm build pnpm start验证生产构建。仓库配套的端到端测试 e2e/rsc-css-modules.spec.ts 验证了「CSS Modules 类名确实渲染到了 DOM 上」这一核心断言test(css-modules classes, async ({ page }) { await page.goto(http://localhost:${port}/); const wrapperClass await page .getByTestId(app-wrapper) .getAttribute(class); expect(wrapperClass).toContain(wrapper); // ... 对 app-name / client-counter / increment 同理 });该测试通过 Playwright 启动应用后分别断言app-wrapper、app-name、client-counter、increment四个节点的class属性包含对应的局部类名wrapper、text、counterWrapper、counterButton。注意测试断言的是「包含」而非「完全等于」——因为 CSS Modules 生成的实际类名是「原类名 哈希后缀」的形式例如wrapper_abc123toContain(wrapper)恰好覆盖了这种作用域化命名的特性。小结RSC 应用中的模块化样式组织范式通过这个示例可以总结出在 Waku 中落地 CSS Modules 的可复用手法零配置使用CSS Modules 由底层 Vite 构建能力直接支持*.module.css导入即可用无需 waku.config.ts 或额外插件就近组织每个组件无论 Server 还是 Client与其*.module.css同目录存放类名通过styles.xxx引用天然隔离、无全局污染统一语法use client边界不改变 CSS Modules 的写法——服务端组件与客户端组件使用完全相同的导入与类名引用语法切换组件类型时样式代码无需迁移补齐类型声明TypeScript 项目需要在declaration.d.ts中声明declare module *.module.css;可测试性配合data-testid与toContain断言可以在端到端测试中稳定验证样式类名是否正确渲染。如果你正在搭建纯 RSC 应用并希望获得「零全局污染 组件就近样式」的开发体验直接参考 e2e/fixtures/rsc-css-modules 这个 fixture复制其文件组织与声明写法即可快速起步。赞分享Web框架前端后端【免费下载链接】waku⛩️ The minimal React framework项目地址https://gitcode.com/gh_mirrors/wa/waku点击查看免费下载相关推荐Socket.IO 使用 ES Modules从零搭建 ESM 服务端与客户端示例Socket.IO 使用 ES Modules从零搭建 ESM 服务端与客户端示例 ES ModulesESM是 JavaScript 官方的模块化标准后端即时通讯WebSocketDjango Tailwind CSS daisyUI用组件类为服务端模板消除样式噪音Django Tailwind CSS daisyUI用组件类为服务端模板消除样式噪音 本文围绕 daisyUI 文档中的 Django 集成方案展开前端UI组件使用 Nitro 为 React Router 全栈应用提供 SSR 与统一服务端部署使用 Nitro 为 React Router 全栈应用提供 SSR 与统一服务端部署 本指南基于当前仓库中的 vite ssr react router 示例后端Web框架SSR上一篇JS-GitJavaScript中的Git革命下一篇Linux 内核 Amlogic C3 ISP 驱动详解C308L 摄像头图像信号处理管线、V4L2 接口与运行时参数编程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考