手写下拉:哪些部分发 JS,哪些不发

这个下拉由两部分组成。点按钮试试,然后看下面的拆解:

✅ 客户端外壳(唯一发 JS 的部分)

只有 useState 开关 + 按钮的 onClick。这是交互,必须发 JS。但它是极小的几行。

文件:client-dropdown.tsx(带 'use client')

✅ 服务端内容(不发 JS 的部分)

菜单里的 3 个项是服务端组件 ServerMenuItem 渲染的,数据由 fetchMenuItems() 在服务端算好。它们的代码和逻辑不会进浏览器 bundle

文件:本页 page.tsx(服务端组件)

对比 Ant Design:它的 <Dropdown> 会把"外壳 + 内容 + 一堆细节逻辑"整体打成客户端 JS 发下去。而这里,只有外壳那几行发 JS,内容部分不发。