onServerPrefetch() Server-Side Data Prefetch
Last updated: 2026-10-22
onServerPrefetch() Server-Side Data Prefetch
onServerPrefetch() runs during server-side rendering only, letting async data resolve before the HTML is produced.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onServerPrefetch(async () => {
store.items = await fetchItems()
})⚙️ Arguments
| callback | May return a Promise; SSR waits for it |
|---|
Returns：A Promise or undefined
▶ Example
Edit the code below and see the live result:
Output：
Shows the notice — the hook only runs under SSR.💡 Key Points
ℹ️ Note SSR-only: client-side SPAs never need it.
💡 Tip The standard manual-SSR pattern for prefetching store data outside Nuxt.
⚠️ Warning Never touch the DOM inside — there is none on the server.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Do SPAs need it?
A No — it only runs during SSR/SSG.
Q Does the data reach the client?
A Yes — server state is serialised and rehydrated on the client.
Q Can requests run in parallel?
A Yes, hooks across components wait in parallel.
