为何Nuxt客户端导航不发起新文档请求？SSR相关疑问

1. 首次访问有文档请求，导航详情页无请求的原因 #

这是Nuxt结合vue-router实现的客户端路由（单页应用特性）：

• 首次访问时，浏览器需要从服务器获取完整的HTML文档（包含SSR渲染的初始页面内容、应用核心JS等），所以Network面板会显示文档请求。
• 点击导航时，vue-router会拦截浏览器的默认跳转行为，不再向服务器发起新的文档请求；而是通过前端JS动态修改页面URL、切换组件内容，同时利用预加载的详情页JS资源，直接在客户端完成页面渲染，因此不会出现新的文档请求。

2. 预加载JS但详情页仍有原始HTML的原因 #

这是NuxtSSR+客户端SPA混合渲染的特性：

• 首次访问或页面刷新时，Nuxt会在服务器端将对应路由的Vue组件渲染成完整的HTML字符串，返回给浏览器，所以你能在页面中看到对应的原始HTML内容。
• 通过客户端路由跳转时，预加载的详情页JS已经存在于浏览器中，vue-router切换路由后，Vue会在客户端将组件渲染为HTML，并替换页面DOM，因此你在浏览器元素面板能看到详情页的HTML内容；这个过程无需向服务器请求新文档，完全在前端完成。

3. Vue组件渲染为HTML的两种方式 #

服务器端渲染（SSR） #

在Nuxt的SSR模式下，服务器会：

• 解析目标路由对应的Vue组件。
• 执行组件的asyncData/fetch钩子获取页面所需数据。
• 通过vue-server-renderer引擎将组件编译成HTML字符串。
• 将HTML字符串嵌入到页面模板中，返回给浏览器。

客户端渲染（CSR） #

客户端路由跳转时，Vue会：

• 加载已预下载的目标组件JS（或实时加载）。
• 执行组件生命周期钩子（如created）获取数据（若需要）。
• 通过虚拟DOM（VNode）机制，将组件转换为真实DOM节点，插入到页面的<router-view>区域，完成HTML渲染。

4. vue-router实现无文档请求跳转的核心 #

vue-router的核心是拦截默认跳转+修改URL+动态替换组件：

• 拦截路由链接的点击事件，阻止浏览器默认的页面刷新行为。
• 利用浏览器的history.pushState/replaceState API修改URL，让地址栏显示目标路由，但不触发页面刷新。
• 根据新路由匹配对应的Vue组件，动态替换页面中<router-view>的内容，完成页面切换。

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