选择正确的前端部署方式
前端部署方式取决于页面是否需要服务器在请求时工作。静态文件、常驻 Node 进程与平台函数能承担的能力不同。
- 为任务应用选择一种与数据和认证需求匹配的部署模式，并写出另一种模式会失去什么。
- 静态导出、服务端运行和平台托管
- 完成选择正确的前端部署方式后，应当为任务应用选择一种与数据和认证需求匹配的部署模式，并写出另一种模式会失去什么，并保留类型检查、生产构建、浏览器行为和请求结果作为可重复检查的依据。
- 完成 4.6「Next.js：把页面、路由和服务端代码放进同一项目」
FOUNDATION
必须理解
前端部署方式取决于代码需要在何时运行。纯静态文件、每次请求运行的服务器代码和按需执行的函数能力不同，选择错误会让动态数据或登录在生产环境失效。
本课依次讲清静态导出、服务端运行和平台托管、构建时、请求时与浏览器运行时和环境变量、预览环境和生产环境，最后通过“建立预览与生产检查表，注明环境变量和回滚”检查学习结果。
静态部署像提前印好的宣传册，请求时服务器像现场接单制作，无服务器函数像有人来时才开工的共享厨房。成本与能力不同。
只有本地假数据的任务应用可以静态发布；加入服务端 API、数据库和登录后，需要支持 Next.js 服务端运行能力的平台。
静态导出、服务端运行和平台托管
构建时发生在发布之前，适合提前准备不常变的页面；请求时发生在用户访问的那一刻，可以读取实时数据和身份；浏览器运行时则处理用户设备上的交互。
基础概念
静态导出把站点变成可直接提供的 HTML、CSS 和 JavaScript；常驻服务持续运行服务端进程；平台托管或无服务器环境按请求调度应用能力。
进一步理解
静态方案简单、缓存友好，却没有任意请求时服务端逻辑。常驻进程能力完整但需维护运行环境。托管平台隐藏部分运维，仍有运行时、时长和区域限制。
部署方式应由认证、实时数据、API、成本和团队运维能力决定，而不是只看哪条命令最短。
公开课程可静态生成；包含用户任务、登录和服务端写入的应用需要能够在请求时执行可信代码与访问数据库。
“无服务器”不是没有服务器，而是服务器生命周期和扩缩容由平台管理；代码仍在某个受限运行环境中执行。
这一小节记住：先列出产品必须具备的运行能力，再选择承载方式。
构建时、请求时与浏览器运行时
静态导出最后只有 HTML、CSS 和 JavaScript 文件，没地方长期执行任意服务端逻辑。常驻 Node 服务一直运行，无服务器平台则在有请求时帮你启动函数。
基础概念
构建时发生在发布前，请求时发生在服务器收到访问时，浏览器运行时发生在用户设备加载页面后。变量和代码所在阶段决定它能访问哪些数据与 API。
进一步理解
构建时适合生成公开内容；请求时能读取会话、秘密和最新数据；浏览器能处理点击、DOM 和设备 API，却无法安全保管服务端凭证。
同一源码可能跨多个阶段执行。必须追踪某个值最终是否进入客户端包，而不是只根据文件名猜测安全性。
课程目录在构建时生成，个人任务在请求时按用户查询，筛选按钮在浏览器中更新 URL 和界面。
环境变量出现在服务端代码中不自动保证安全；如果它被注入客户端构建或作为 props 返回，用户仍能看到。
这一小节记住：判断代码能力与秘密边界时，先确认它实际在哪个阶段运行。
环境变量、预览环境和生产环境
开发、预览和生产应该有各自的环境变量。凡是进入客户端代码的值，用户都有办法看到；数据库地址、密钥和令牌只能留在服务端。
基础概念
环境变量是运行环境提供给程序的配置值；开发、预览和生产是相互独立的部署环境，应拥有明确且受控的配置。
进一步理解
开发使用本地服务与测试数据，预览用于验证候选版本，生产承载真实用户。变量名称可一致，实际地址与凭证应分开。
公开前端变量会被打进浏览器资源，任何访问者都能读取。数据库 URL、服务端令牌和私钥只能在可信运行环境使用，并通过平台秘密管理。
预览任务应用连接测试数据库，生产连接真实数据库；客户端只得到公开 API 地址，不得到数据库凭证。
`.env` 文件只是本地配置载体，不等于安全机制；提交到 Git 或打印进日志后，变量仍会泄露。
这一小节记住：按环境分离配置，并按最终运行位置判断变量能否公开。
AI COLLABORATION
AI 如何参与
在选择正确的前端部署方式这一课，AI 负责根据真实材料解释静态导出、服务端运行和平台托管并指出遗漏，学习者负责控制范围、执行修改和核对类型检查、生产构建、浏览器行为和请求结果。
推荐协作顺序
- 1
把应用需要的动态能力逐条告诉 AI，而不是先报平台名字。
- 2
让它标出每项能力发生在构建、服务器还是浏览器。
- 3
根据结果比较部署方式，并写清选择后失去的能力。
请根据页面路由、动态数据、认证、环境变量和预算约束比较静态托管与服务端运行。用表格列能力、限制和验证方式，不虚构平台功能。最后给出选择理由与回退方案。
根据产品能力选择运行模式，而不是只比较平台热度；明确静态导出的能力边界；选择正确的前端部署方式的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 确认秘密变量不会写进 NEXT_PUBLIC_ 前缀，平台建议支持当前 Next.js 版本和所需运行方式。
- 让 AI 根据认证、数据新鲜度和服务端能力列出可行部署模式及被放弃的能力。
- 在预览与生产分别验证关键变量、动态路由和真实请求，确认没有依赖本地隐含环境。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
为方便而错误静态化
- 你会看到
- 需要登录的数据页面无法按用户请求处理
- 为什么发生
- 静态产物在构建时生成，无法在每次请求中读取用户会话或实时数据。
- 怎样纠正
- 先列运行时能力再选模式
预览成功就直接判断生产成功
- 你会看到
- 两边变量和域名配置不同
- 为什么发生
- 预览与生产可能使用不同域名、变量和访问策略，结果不能互相代替。
- 怎样纠正
- 分别执行生产地址验收
泄露服务端变量
- 你会看到
- 秘密值进入前端产物
- 为什么发生
- 带公开前缀或进入客户端模块的变量会被打包，用户可以从脚本中读取。
- 怎样纠正
- 检查变量公开规则和构建输出
HANDS-ON
动手任务
为任务应用选择一种与数据和认证需求匹配的部署模式，并写出另一种模式会失去什么。
- 完成 4.6「Next.js：把页面、路由和服务端代码放进同一项目」
跟着做
- 01
列出任务应用当前所有运行时能力。
- 02
分别标注它们发生在构建、服务器请求或浏览器。
- 03
判断当前版本能否静态导出，并写出理由。
- 04
为未来数据库版本选择支持服务端运行的平台。
- 05
建立预览与生产检查表，注明环境变量和回滚。
为任务应用选择一种与数据和认证需求匹配的部署模式，并写出另一种模式会失去什么。
解释为什么把数据库密码写入前端环境变量，即使页面不显示它也不安全。
离开本课前，自问四件事
- 静态导出、常驻服务和无服务器托管各自能做什么？
- 构建时、请求时和浏览器运行时分别可以安全访问哪些信息？
- 为什么开发、预览和生产需要分离配置与数据？
- 我如何判断一个环境变量最终是否会暴露给用户？
确认完成后，会同步更新学习中心的课程学习进度。