onServerPrefetch() SSR 服务端预取数据
最后更新：2026-10-22
onServerPrefetch() SSR 服务端预取数据
onServerPrefetch() 只在服务端渲染时执行：等它完成后才渲染 HTML，用于在 SSR 阶段预取异步数据。
| 分组 | 生命周期钩子 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
onServerPrefetch(async () => {
store.items = await fetchItems()
})⚙️ 参数
| callback | 可返回 Promise，SSR 会等待它完成 |
|---|
返回值：Promise 或 undefined
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
显示提示文字；该钩子只在服务端 SSR 环境执行。💡 要点
ℹ️ 说明 仅 SSR 场景使用：纯客户端应用（Vite SPA）不需要它。
💡 提示 配合 Pinia/Vuex 的 store 预取数据，是 Nuxt 之外手动 SSR 的标准做法。
⚠️ 注意 内部不要访问 DOM：服务端没有 DOM，会直接报错。
🏷️ 相关生命周期钩子
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q SPA 项目需要它吗？
A 不需要，只在服务端渲染（SSR/SSG）流程中执行。
Q 数据会传给客户端吗？
A 会：服务端状态通过 useSSRContext/序列化注水（hydration）交给客户端复用。
Q 能并行多个请求吗？
A 可以，多个组件的 onServerPrefetch 会并行等待，配合 useAsyncData 之类的封装更佳。
