useSSRContext() SSR コンテキストへのアクセス

最終更新：2026-10-22

useSSRContext() はサーバーレンダリング中にコンテキストオブジェクトを取得します。クライアントのハイドレーション時に再利用するデータを載せるために使います。

📝 構文

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

戻り値：SSR コンテキストオブジェクト（サーバー側のみ値あり）

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

出力：

Shows the SSR notice.

ℹ️ 補足 サーバーレンダリングの流れの中でのみ値を持ちます。クライアントでは常に null チェックを行ってください。

💡 ヒント 典型的な使い方：事前取得したデータを ctx に載せてテンプレート内にインライン出力し、クライアントが読み取ってハイドレーションします。

⚠️ 注意 コンポーネントのトップレベルで同期的にアクセスしないでください（undefined の可能性があります）。必要に応じて null チェックをして使います。

Q クライアントでエラーになりますか？

A なりません。undefined が返るため、自分で null チェックが必要です。

Q Pinia の状態との関係は？

A SSR 時に store のスナップショットを ctx に載せ、クライアントの初期化時に読み取ります。

Q 関数を保存できますか？

A シリアライズ可能なデータ（JSON で扱えるもの）だけを保存することをおすすめします。

Web-Tutorial 技術チーム

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