09-服务端渲染与框架

部署形态决定了「你的代码能做什么」——静态托管没有服务端、Serverless 有冷启动与执行时间限制、容器要自己管伸缩、Edge 有 API 白名单；而工程上的关键是「产物形态（standalone）、环境变量的构建期/运行期区分、健康检查与优雅关闭、以及可回滚」。

赞(0)陌上寒2026-10-17阅读()去评论

Server Actions 的本质是「一个自动生成的 POST 端点」——所以它最容易被误解的地方是「它没有任何隐式安全」：必须自己鉴权 + 自己校验参数 + 自己防 CSRF；而它的真正价值是「用「函数调用」的写法拿到『渐进增强的表单提交 + 自动重新验证 + 乐观更新』」。

赞(0)陌上寒2026-10-17阅读()去评论

Next.js 的缓存难点不在「有哪些缓存」，而在「四层缓存各自的『生命周期』与『失效方式』不同」——所以「为什么我的数据不更新」与「为什么每次都重新请求」这两个问题，答案都在「你踩到了哪一层」。

赞(0)陌上寒2026-10-17阅读()去评论

Edge Runtime 不是「Node.js 的另一个版本」，而是「一个基于 V8 isolate 的、只有 Web 标准 API 的轻量运行时」——它的价值是「冷启动 5ms 级 + 就近部署」，而它的约束（没有 fs/net/childprocess、内存与 CPU 时间受限、不保证实例存活）…

赞(0)陌上寒2026-10-17阅读()去评论

SEO 的四根支柱是「可抓取的内容（SSR/SSG）、准确的元数据（title/description/OG）、结构化数据（JSON-LD）、以及「Core Web Vitals 性能」；Next.js 的 metadata API 让元数据可以「声明式 + 动态」生成。

赞(0)陌上寒2026-10-17阅读()去评论

传统 SSR 必须「等所有数据就绪才返回 HTML」，流式渲染（Streaming SSR）改成「先把外壳（shell）发给浏览器，慢的部分用 Suspense 占位、数据就绪后再流式补上」——从而改善 TTFB 与首屏可见时间。

赞(0)陌上寒2026-10-16阅读()去评论

数据可以在「服务端（渲染前）」「客户端（交互后）」「构建时（静态）」三个位置获取——首选服务端（更快、更安全、利于 SEO、包更小），客户端只用于「必须交互后才发」或「频繁变化」的数据。

赞(0)陌上寒2026-10-16阅读()去评论

水合（Hydration） 是「客户端复用服务端生成的 HTML、绑定事件、变成可交互」的过程；水合不匹配（hydration mismatch） 发生在「客户端首次渲染的结果与服务端 HTML 不一致」时——常见原因是用了随机值/当前时间、依赖了浏览器信息、渲染了非法 HTML 结构。

赞(0)陌上寒2026-10-16阅读()去评论

Server Component 在服务端执行（可直接查数据库、代码不进客户端包，但不能有状态/事件/浏览器 API）；Client Component 用 "use client" 标记（可交互、有状态）；"use client" 是一条边界——它导入的所有模块都会变成客户端代码。

赞(0)陌上寒2026-10-16阅读()去评论

App Router 用「目录结构即路由」——app/ 下的目录是路由段，page.tsx 是页面，layout.tsx 是共享布局，loading.tsx/error.tsx 提供边界；组件默认是 Server Component，要交互才加 "use client"。

赞(0)陌上寒2026-10-16阅读()去评论