服务端与客户端边界
标记一个课程页的组件边界，解释正文、进度按钮、密钥和数据库查询应放在哪里。
课程全目录 · 选择章节
本课学习目标
- • 理解 — Next.js 服务端组件适合读取数据与保护密钥，客户端组件处理状态和浏览器交互。use client 定义客户端模块边界，不意味着整个应用都应该搬到浏览器。服务器到客户端的参数需要可序列化，秘密数据永远不应传过去。
- • 应用 — 课程正文在服务端渲染，测验选择按钮使用客户端组件。模型密钥留在服务器接口，浏览器只发送经过校验的问题，不能直接读取环境密钥。
- • 验证 — 标记一个课程页的组件边界，解释正文、进度按钮、密钥和数据库查询应放在哪里。
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
Next.js 服务端组件适合读取数据与保护密钥，客户端组件处理状态和浏览器交互。use client 定义客户端模块边界，不意味着整个应用都应该搬到浏览器。服务器到客户端的参数需要可序列化，秘密数据永远不应传过去。
课程正文在服务端渲染，测验选择按钮使用客户端组件。模型密钥留在服务器接口，浏览器只发送经过校验的问题，不能直接读取环境密钥。
不要给包含密钥的变量添加 NEXT_PUBLIC 前缀。客户端打包的数据可以被访客读取，隐藏按钮也不能保护服务端权限。
02 / 心智模型
理解
Next.js 服务端组件适合读取数据与保护密钥，客户端组件处理状态和浏览器交互。use client 定义客户端模块边界，不意味着整个应用都应该搬到浏览器。服务器到客户端的参数需要可序列化，秘密数据永远不应传过去。
应用
课程正文在服务端渲染，测验选择按钮使用客户端组件。模型密钥留在服务器接口，浏览器只发送经过校验的问题，不能直接读取环境密钥。
验证
标记一个课程页的组件边界，解释正文、进度按钮、密钥和数据库查询应放在哪里。
03 / 代码骨架
// Server component
export default async function Page() {
const lessons = await readLessons();
return <LessonList lessons={lessons} />;
}这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
课程正文在服务端渲染，测验选择按钮使用客户端组件。模型密钥留在服务器接口，浏览器只发送经过校验的问题，不能直接读取环境密钥。
- 01
分析边界
Next.js 服务端组件适合读取数据与保护密钥，客户端组件处理状态和浏览器交互。use client 定义客户端模块边界，不意味着整个应用都应该搬到浏览器。服务器到客户端的参数需要可序列化，秘密数据永远不应传过去。
- 02
观察具体过程
课程正文在服务端渲染，测验选择按钮使用客户端组件。模型密钥留在服务器接口，浏览器只发送经过校验的问题，不能直接读取环境密钥。
- 03
验证失败路径
不要给包含密钥的变量添加 NEXT_PUBLIC 前缀。客户端打包的数据可以被访客读取，隐藏按钮也不能保护服务端权限。
05 / 动手做
用自己的产物检验理解
标记一个课程页的组件边界，解释正文、进度按钮、密钥和数据库查询应放在哪里。
完成时检查
- 提交可阅读的实现或流程图，并注明输入和输出。
- 至少覆盖一个成功案例与一个失败案例。
- 解释本课的边界，写出仍未解决的一项限制。
自动保存在当前浏览器，不会同步到账户。
06 / 检查点