C27

渲染边界

任务说明

Next.js 工程

拆分服务端与客户端：lib/stats.ts 模拟数据库访问（含秘密 token），app/page.tsx 作为服务端组件取数，交互过滤放在 app/filter-panel.tsx。starter 把数据访问直接搬进了客户端组件，构建时会把数据库依赖和秘密打进浏览器包。修好这条边界。验收方式：本练习无法自动判分。补齐 starter 后在 examples/exercises/next-c27-render-boundary/starter 目录执行 npm install && npm run dev，浏览器访问 http://localhost:3000 按要求走查；tests/check.mjs 是结构自检（node tests/check.mjs starter 或 solution 目录路径）。关键走查：页面正常显示统计；filter-panel 里筛选按钮可交互；终端执行 node tests/check.mjs ../solution 通过。

要求

app/filter-panel.tsx 顶部声明 "use client"，且不 import lib/stats（或任何 fs/数据库模块）
数据由 app/page.tsx 在服务端 await getCourseStats() 取得，以可序列化 props 传给客户端组件
filter-panel 接收 props 并用 useState 实现状态筛选交互
传给客户端组件的 props 不包含 secret 字段
app/page.tsx 保持服务端组件（不声明 "use client"）

N05 服务端与客户端组件 N07 服务端数据访问

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

渲染边界

Command Palette