useSSRContext() 访问 SSR 上下文

最后更新：2026-10-22

useSSRContext() 在服务端渲染期间获取上下文对象：用它挂载需要在客户端注水时复用的数据。

📝 语法

import { useSSRContext } from "vue"
const ctx = useSSRContext()
ctx.state = { user: "Ana" }

返回值：SSR 上下文对象（仅服务端有值）

修改下面的代码，在预览区实时查看效果：

输出：

显示 SSR 说明文字。

ℹ️ 说明 仅在服务端渲染流程中有值；客户端应始终判空。

💡 提示 典型用法：把预取的数据挂到 ctx 供模板内联输出，客户端读取后注水。

⚠️ 注意 不要在组件顶层同步访问（可能为 undefined），按需判空使用。

更多案例即将上线。

Q 客户端会报错吗？

A 不会，返回 undefined，需自行判空。

Q 和 Pinia 状态的关系？

A SSR 时把 store 快照挂到 ctx，客户端初始化时读取。

Q 能存函数吗？

A 建议只存可序列化数据（JSON 友好）。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。