onServerPrefetch() SSR でのサーバー側データ事前取得

最終更新：2026-10-22

onServerPrefetch() はサーバー側レンダリング中にのみ実行されます。完了を待ってから HTML が描画されるので、SSR 時の非同期データの事前取得に使います。

📝 構文

onServerPrefetch(async () => {
  store.items = await fetchItems()
})

callback	Promise を返せます。SSR はその完了を待ちます

戻り値：Promise または undefined

以下のコードを編集して結果を確認しましょう：

出力：

Shows the notice — the hook only runs under SSR.

ℹ️ 補足 SSR 専用です。純粋なクライアントアプリ（Vite の SPA）では必要ありません。

💡 ヒント Pinia / Vuex のストアデータを事前取得する、Nuxt を使わない手動 SSR の標準的なやり方です。

⚠️ 注意 内部で DOM に触れてはいけません。サーバーには DOM がなく、そのままエラーになります。

Q SPA プロジェクトで必要ですか？

A 必要ありません。サーバーレンダリング（SSR/SSG）の流れの中でのみ実行されます。

Q データはクライアントに渡りますか？

A 渡ります。サーバー側の状態は useSSRContext / シリアライズを経由してクライアントで注水（ハイドレーション）され、再利用されます。

Q 複数のリクエストを並行して実行できますか？

A できます。複数コンポーネントの onServerPrefetch は並行して待たれます。useAsyncData のようなラッパーと併用するとさらに良いです。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。