useSSRContext() Access the SSR Context
Last updated: 2026-10-22
useSSRContext() Access the SSR Context
useSSRContext() retrieves the SSR context during server rendering so data can be carried into client hydration.
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
import { useSSRContext } from "vue"
const ctx = useSSRContext()
ctx.state = { user: "Ana" }Returns：The SSR context object (server only)
▶ Example
Edit the code below and see the live result:
Output：
Shows the SSR notice.💡 Key Points
ℹ️ Note Server-only — always guard it.
💡 Tip Typically used to inline prefetched state for hydration.
⚠️ Warning Guard access — it may be undefined.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does it throw on the client?
A No — it returns undefined.
Q Relation to store state?
A Server snapshots go into ctx and are re-read on the client.
Q Can functions be stored?
A Keep it serialisable.
