Skip to content

开发记录:Nuxt 数据获取与渲染模式重构

这篇开发记录用于复盘 M5-2 的背景、目标、执行过程和最终结果。

为什么在 M5-2 补 Nuxt 页面案例

M5-1 已经补上了 SSR / hydration 的运行时数据流,但如果继续往 Nuxt 实战靠近,还需要一篇更贴近页面层的案例。

Nuxt 项目里的高频问题通常不是“不会写页面”,而是:

  • 页面数据到底应该怎么拿
  • 页面状态和 composable 怎么分层
  • 哪些逻辑只属于浏览器
  • 哪些页面该走 SSR,哪些更适合 CSR 或混合策略

所以 M5-2 的重点,不是增加一个框架名词,而是补齐页面级边界设计。

这轮做了什么

这轮主要完成了这些事情:

  • 新增 Nuxt 案例文档
  • 新增 M5-2 任务拆解文档
  • 新增 M5-2 详细设计文档
  • 更新里程碑、入口、导航与统一框架
  • 将 Nuxt 页面重构正式纳入当前方法库

这轮最重要的决策

决策一:先讲边界,不先讲 API 列表

Nuxt API 很多,但本项目的目标是“重构方法库”,不是“官方文档镜像”。所以本轮优先沉淀的是:

  • 页面首屏数据边界
  • hydration 边界
  • composable 边界
  • 渲染模式选择边界

决策二:让 Nuxt 案例与 M5-1 形成上下游关系

M5-1 更偏 SSR 协议层,M5-2 更偏页面落地层。两轮内容连起来以后,运行时边界这条线就变得更完整了。

决策三:继续坚持“案例新增 = 体系同步更新”

这轮仍然没有只停留在新增一篇案例,而是同步更新了:

  • 里程碑规划
  • README
  • 索引页
  • 导航图
  • 统一框架

这样方法库结构不会因为新增内容再次失衡。

本轮自测怎么做

因为本轮仍然只动文档,没有改独立子项目源码,所以自测继续聚焦文档结构完整性:

  • 检查新增 Markdown 文件是否落盘
  • 检查本地链接是否全部可解析
  • 检查入口页和导航图是否已接入新案例
  • 检查统一框架是否已纳入 Nuxt 维度

本轮结果

M5-2 完成后,当前方法库已经不再只是 Vue 客户端重构案例集合,而开始覆盖:

  • Vue 页面重构
  • Vue 基础组件重构
  • SSR / hydration 运行时边界
  • Nuxt 页面数据获取与渲染模式

这意味着后续如果继续扩展 Nuxt、数据预取、服务端边界相关主题,已经有了一条稳定的方法线可以继续挂载。

共 20 个模块,1301 篇 Markdown 文档。