DefNull 实验室
现代 Web 工程/实践笔记

Nuxt 全栈项目是怎么运转的

从页面渲染、服务端接口到部署产物,建立一张完整的 Nuxt 心智地图。

已验证更新于 2026-07-2812 分钟
能力证据已用于 DefNull 实验室与多个业务原型
01

先看完整链路

Nuxt 不只是一个页面框架。一次请求会依次经过路由、数据获取、服务端渲染、客户端激活和交互更新。理解这条链路,才能判断代码应该放在页面、组合式函数还是服务端接口里。

我把 Nuxt 当成一个可以同时承载内容、交互和轻量后端的工程外壳,而不是单纯的 Vue 页面生成器。

  • 页面与布局负责信息结构
  • composables 负责复用状态
  • Nitro 负责接口与部署边界
02

SSR、CSR 与 Hydration

SSR 先在服务端生成 HTML,客户端再接管交互。这个接管过程就是 Hydration。只要服务端和客户端初始状态不一致,就可能出现闪烁或 hydration mismatch。

内容型页面优先利用 SSR,强交互且依赖浏览器能力的部分再留给客户端,是我目前最稳妥的默认策略。

03

在项目里如何验证

DefNull 实验室使用服务端 API 读取 JSON 内容,再由页面消费同一份数据。它验证了内容模型、页面渲染和部署产物能够处在一条可维护的链路中。

  • 检查首屏 HTML 是否包含核心内容
  • 观察接口失败时的 loading / error 状态
  • 构建后验证服务端路由与静态资源
关联标签