浏览器第一次访问到底发生了什么？

学习目标

理解 Nuxt 的 SSR（Server-Side Rendering）工作流程。

学完本章，你应该能够回答：

• 浏览器第一次访问 Nuxt 时发生了什么？
• 为什么 Nuxt 首屏速度快？
• 浏览器和服务器分别做了哪些事情？

一、这个知识解决什么问题？

很多人学习 SSR 时，只记住一句话：SSR = 服务端渲染。

但真正的问题是：

浏览器第一次访问 Nuxt，到底是谁在工作？

只有弄清楚这个问题，后面的 Hydration 才容易理解。

二、一起推导

假设浏览器第一次访问 https://example.com/，发送 GET / 请求。

注意：此时浏览器还没有 Vue、JavaScript、页面组件，浏览器只是请求首页。

服务器收到请求后，Nuxt 开始工作：

读取当前路由 → 找到对应 Page → 执行 Vue 组件 → 生成 HTML → 返回浏览器

浏览器收到的已经不是 <template>，而是真正的 HTML：

<h1>Hello Nuxt</h1>
<p>Welcome!</p>

所以第一次打开网页，即使 JavaScript 还没有下载完成，用户已经可以看到页面。

三、SSR 的完整流程

Browser → GET / → Nuxt Server → 执行 Vue → 生成 HTML → 返回 HTML → 浏览器显示页面

浏览器没有参与"Vue 组件生成 HTML"这一步，真正完成渲染的是 Nuxt Server。

四、脑图

注意两条泳道：

1. Nuxt Server：把路由对应的 Vue 组件树执行并转换成 HTML 字符串
2. Browser：请求资源、解析 HTML、计算页面布局并绘制到屏幕

"服务端渲染"不表示浏览器什么都不做，它准确表达的是：浏览器收到响应时，页面内容已经存在于 HTML 中，不需要先运行 Vue 才能生成首屏内容。

五、代码实验

创建页面，启动 pnpm dev，浏览器访问后右键查看网页源代码。

你会发现源代码里已经有渲染好的 HTML 内容——这由服务器生成，而不是浏览器运行 Vue 后才生成的。

六、容易踩坑

❌ SSR 就是浏览器渲染

不是。浏览器第一次只是接收 HTML，真正把 Vue 组件生成 HTML 的是服务器。

❌ 浏览器第一次就开始运行 Vue

不是。浏览器第一次先显示 HTML，Vue 稍后才开始接管页面——这个过程叫 Hydration（下一章讲解）。

❌ SSR 每次都会执行所有代码

需要区分服务端执行和浏览器执行。例如 window.innerWidth 在服务器上会直接报错，因为服务器没有 window。

一句话记忆

SSR = 服务器先把页面画好，再交给浏览器显示。