Skip to content

开发记录:Nuxt路由规则与混合渲染策略重构

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

为什么在 M5-10 补 Nuxt路由规则与混合渲染

前面的案例已经覆盖了页面、基础组件、SSR、Nuxt 页面数据、状态管理、复杂交互、认证权限、路由壳层、错误隔离、异步加载和 Nuxt 运行时边界,但在真实 Nuxt 项目里,还有一条会不断影响这些内容的横向主线:页面到底应该如何被服务器响应。

只要这条链路没有收口,前面任何一类场景都会逐渐出现问题:

  • 页面虽然能跑,但响应方式和页面价值不匹配
  • 内容更新节奏与缓存策略彼此脱节
  • routeRules 只是零散配置,而不是页面级策略表达
  • 页面数据流和部署响应流各自演化,最后越来越难对齐

所以 M5-10 选择 Nuxt 路由规则与混合渲染,是为了把“页面价值、渲染模式、缓存策略、部署响应”这一条非常常见的横向架构线补齐。

这轮做了什么

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

  • 新增 Nuxt 路由规则与混合渲染案例文档
  • 新增 M5-10 任务拆解文档
  • 新增 M5-10 详细设计文档
  • 更新里程碑、入口、导航与统一框架
  • 将 Nuxt 响应策略型案例正式纳入当前方法库

这轮最重要的决策

决策一:先讲页面价值,再讲 routeRules 配置

这轮没有把重点放在“属性应该怎么配”,而是放在:

  • 哪些页面属于内容优先页、交互优先页、后台工作台页
  • 为什么不同页面应该有不同响应策略
  • swr / isr / prerender 为什么必须和内容更新节奏对齐
  • ssr: false 为什么是一种页面责任模型切换

决策二:选 Nuxt 渲染模式与生命周期素材作为案例来源

这组素材非常适合作为案例来源,因为它刚好覆盖了:

  • 通用渲染与客户端渲染
  • 混合渲染与 routeRules
  • swr / isr / prerender
  • 最终 HTML 响应与缓存策略的运行时落点

它很适合作为“从配置项理解,走向页面价值理解”的过渡案例。

决策三:把数据策略和响应策略放到同一层语义里

这轮没有把页面数据获取和响应缓存分开谈,而是把重点放在:

  • 首屏必须内容如何获取
  • 哪些数据交给客户端获取
  • 页面响应策略如何围绕同一页面目标来设计

这样新案例就能直接挂到当前已经形成的统一框架里。

本轮自测怎么做

这轮仍然只修改文档,因此自测继续聚焦文档完整性:

  • 检查新增 Markdown 文件是否生成成功
  • 检查本地链接是否全部可解析
  • 检查入口页、导航图和总框架是否已经接入新案例
  • 检查 M5-10 的任务拆解、详细设计和开发记录是否齐全

本轮结果

M5-10 完成后,当前方法库已经不只覆盖状态、渲染、交互、认证、路由、容错、异步加载和运行时边界问题,也开始覆盖 Nuxt 响应策略本身的一条基础主线:路由规则、缓存策略与混合渲染边界。

这意味着后续如果继续扩展:

  • 内容站静态化与缓存策略
  • 后台页 CSR 化策略
  • 活动页预渲染与更新时间策略
  • 页面数据层与响应缓存层协同设计
  • Nuxt 页面级响应治理

都已经有了稳定挂载点。

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