SuperAPI AI 工具集

shadcn-impl-rsc-vs-client-boundaries

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:为在 Next.js App Router 中使用 shadcn 原语的项目提供 "use client" 指令放置规则,判断哪些原语是 RSC 安全、哪些需要客户端边界,以及如何用服务端外壳承载小型客户端孤岛。

主要能力:给出逐原语兼容矩阵(完整 60 行见 references/methods.md)。RSC 安全(无需指令)包括 Alert、AspectRatio、Avatar、Badge、Breadcrumb、Button、Card、Empty、Field、Input、InputGroup、Item、Kbd、Label、Pagination、Separator、Skeleton、Spinner、Table 系列、Textarea、Typography 等纯展示原语。需要客户端指令的包括 Accordion、AlertDialog 根与触发、Calendar、Carousel、Checkbox、Collapsible、Combobox、Command、ContextMenu、Dialog、Drawer、DropdownMenu、Form、HoverCard、Input OTP、Menubar、NavigationMenu、Popover、Progress 动画变体、RadioGroup、Resizable、ScrollArea、Select、Sheet、Sidebar、Slider、Sonner、Switch、Tabs、Toggle、ToggleGroup、Tooltip 等。经验规则:包装 Radix 包的原语带 "use client",静态 HTML 原语不带。

使用方式:components.json 中 App Router 项目应设 "rsc": true,CLI 会为需要的生成文件前置 "use client";rsc: false 则给每个生成组件都加指令,适用于 Pages Router、Vite + React、Astro 客户端孤岛。指令必须置于文件最顶部、任何 import 之前,用双引号或单引号,不可用反引号、模板字面量或条件语句。边界应尽量画在文件树深处,不要把 layout.tsx 或 page.tsx 标为客户端。推荐模式为服务端页面渲染数据,交互部分抽到带指令的子文件;Provider 包装器单独建客户端文件,layout 保持服务端。跨边界只传可序列化数据,服务端 JSX 通过 children 插槽传入,事件处理用 Server Actions。

适用场景:App Router 项目接入 shadcn、判断某原语是否需要客户端边界、审计现有项目的指令放置。

限制:资料未提供具体版本要求、性能数据或收费信息;完整矩阵与示例需查阅其 references 文件。