onServerPrefetch() Pré-busca de dados no servidor (SSR)
Última atualização: 2026-10-22
onServerPrefetch() Pré-busca de dados no servidor (SSR)
onServerPrefetch() só executa durante a renderização no servidor: o HTML só é renderizado depois que ele termina, usado para pré-buscar dados assíncronos na fase de SSR.
| Grupo | Hooks de Ciclo de Vida |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
onServerPrefetch(async () => {
store.items = await fetchItems()
})⚙️ Argumentos
| callback | Pode retornar uma Promise; o SSR espera a conclusão |
|---|
Retorno：Promise ou undefined
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows the notice — the hook only runs under SSR.💡 Pontos-chave
ℹ️ Nota Somente para cenários SSR: aplicações puramente client-side (SPA com Vite) não precisam dele.
💡 Dica Combinado com o store do Pinia/Vuex para pré-buscar dados, é a prática padrão de SSR manual fora do Nuxt.
⚠️ Aviso Não acesse o DOM internamente: o servidor não tem DOM, o que causa erro direto.
🏷️ Hooks de Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Projetos SPA precisam dele?
R Não precisa; só executa no fluxo de renderização do servidor (SSR/SSG).
P Os dados são passados ao cliente?
R Sim: o estado do servidor é entregue ao cliente por serialização/reidratação (hydration) para reutilização.
P Dá para fazer várias requisições em paralelo?
R Sim, os onServerPrefetch de vários componentes esperam em paralelo; ainda melhor com encapsulamentos como useAsyncData.
