Nuxt SSG静态站路由切换后内容未即时渲染引发布局偏移问题

Nuxt全静态生成模式下，路由切换后出现分阶段渲染、布局偏移的现象属于框架默认运行机制范畴，不是异常bug，可通过配置优化消除。

• 全静态模式下，路由切换时浏览器首先解析返回的预构建静态HTML文件，第一时间呈现的黄色背景组件就是静态HTML中内置的基础结构内容，这部分渲染不需要等待JavaScript执行。
• 黑色背景组件的延迟渲染来自客户端水合（Hydration）阶段耗时：静态HTML插入页面后，Nuxt需要等待目标页面的JS分片加载、解析、执行完成，完成组件事件绑定、动态逻辑注入后，需要客户端激活的组件才会完整挂载。如果页面包含大量批量渲染的组件，JS解析执行的耗时就会形成可感知的短暂延迟，进而引发布局偏移。
• 该问题偶现的特性与用户网络状态、浏览器JS线程占用情况直接相关：如果目标页面JS分片已被浏览器缓存、设备性能充足且JS线程空闲，延迟会短到无法感知；如果是首次访问目标路由、设备性能一般或JS线程有其他任务占用，延迟就会非常明显。

• 配置资源预拉取：在nuxt.config.js中开启router: { prefetchLinks: true }，用户鼠标悬停在跳转链接上时就提前加载目标页面的JS分片，实际点击跳转时水合所需资源已完成加载，不会出现等待延迟。
• 消除布局偏移：给延迟加载的黑色背景组件外层容器，提前设置和组件渲染后尺寸一致的min-height、min-width样式，就算组件延迟挂载，也不会挤压其他已渲染元素的位置，从根源解决布局偏移问题。
• 调整组件加载策略：对需要即时呈现的页面组件，添加/* nuxt-component: no-lazy */魔法注释关闭组件懒加载，让目标页面的JS资源和路由HTML并行加载，减少水合等待时间。
• 版本升级优化：如果业务允许，可升级至Nuxt 3，其底层Nitro引擎支持流式水合、组件级预取，路由切换时的水合耗时较Nuxt 2降低60%以上，绝大多数场景下不会出现可感知的分阶段渲染问题。

记录到的两阶段渲染表现完全符合上述运行逻辑：

1. 首阶段仅黄色背景组件显示：对应静态HTML直出完成、客户端水合尚未启动的阶段
2. 延迟后黑色背景组件加载完成：对应客户端水合执行完毕、组件全量挂载的最终状态

内容的提问来源于stack exchange，提问作者Jonatanbs