useRequestEvent の活用ガイド：Nuxt アプリでのリクエスト情報取得を深掘り

Nuxt でサーバーサイドレンダリング（SSR）やサーバーサイド処理を行う際、受信した HTTP リクエストの詳細情報にアクセスしたい場面は多々あります。useRequestEvent は、そんなニーズに応えるための便利なコンポーザブルです。この記事では、useRequestEvent の基本的な使い方から、実務での具体的なユースケース、注意すべきポイントまでを丁寧に解説します。

1. イントロ：なぜ useRequestEvent が嬉しいのか？

Nuxt アプリケーションでは、クライアントとサーバーの両方でコードが動作しますが、リクエストに関する情報はサーバー側でしか取得できません。useRequestEvent を使うことで、現在処理中の HTTP リクエストの詳細（URL、ヘッダー、メソッドなど）に簡単にアクセスでき、以下のような課題を解決できます。

• API ルートやサーバーサイドミドルウェアでリクエスト内容に応じた処理を実装したい
• SSR 時にリクエストヘッダーを参照して動的にレスポンスを変えたい
• 認証やロギングなど、リクエスト単位の情報を扱う処理を効率化したい

2. まず結論：useRequestEvent の要点まとめ

• useRequestEvent は現在の HTTP リクエストイベントオブジェクトを返す（サーバーサイド限定）
• ブラウザ環境では undefined を返すため、クライアント側での使用は避ける
• 返されるイベントオブジェクトからは、req（Node.js の IncomingMessage）、res（ServerResponse）、path、headers などにアクセス可能
• API ルートやサーバーサイドミドルウェア、プラグイン内での利用が主な用途
• SSR のコンテキスト内でリクエスト情報を取得し、動的なレスポンス生成に役立つ

3. いつ使うべきか？使わない方がよいケースは？

使うべきケース

• サーバーサイドでリクエスト情報が必要なとき
  API エンドポイントやサーバーミドルウェアで、リクエストヘッダーやパス、クエリパラメータを参照したい場合。

• SSR 時にリクエストに基づく動的処理を行うとき
  例えば、ユーザーの言語設定をヘッダーから取得して多言語対応を切り替えるなど。

• 認証やアクセス制御のためにリクエスト情報を検証するとき
  JWT トークンの検証やクッキーの読み取りなど、リクエスト単位の認証処理に。

使わない方がよいケース

• クライアントサイドのコードで使う場合
  ブラウザでは useRequestEvent は undefined を返すため、クライアント専用の処理には向きません。

• 単純にルーティング情報だけが欲しい場合
  ルーティング情報は Nuxt の useRoute などで取得できるため、リクエスト全体の情報が不要ならそちらを使う方が適切です。

4. 実務でよくあるユースケースとサンプルコード

ユースケース1：API ルートでのリクエストヘッダー取得

API エンドポイントでクライアントの認証トークンをヘッダーから取得し、認証処理を行う例です。

export default defineEventHandler(async (event) => {
  const req = useRequestEvent()
  const authHeader = req?.req.headers['authorization']

  if (!authHeader) {
    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
  }

  // トークン検証ロジック（省略）
  return { message: '認証成功' }
})

ユースケース2：SSR でのユーザー言語判定

リクエストヘッダーの accept-language を読み取り、SSR 時に適切な言語設定を行う例。

export default defineNuxtPlugin((nuxtApp) => {
  const event = useRequestEvent()
  const acceptLanguage = event?.req.headers['accept-language'] || 'en'

  nuxtApp.provide('userLanguage', acceptLanguage)
})

ユースケース3：サーバーミドルウェアでのアクセスログ記録

リクエストのパスやメソッドをログに残すシンプルなミドルウェア例。

export default defineEventHandler((event) => {
  const req = useRequestEvent()
  console.log(`[${new Date().toISOString()}] ${req?.req.method} ${req?.path}`)
})

5. よくある落とし穴・注意点

SSR と CSR の違いに注意

useRequestEvent はサーバーサイドでのみ有効です。クライアントサイドで呼び出すと undefined になるため、必ずサーバーサイドの処理内で使いましょう。

Hydration 時の差異に注意

SSR で取得したリクエスト情報はクライアントに引き継がれません。クライアント側で同じ情報を使いたい場合は、サーバーから明示的にデータを渡す必要があります。

パフォーマンスへの影響

リクエスト情報を過剰に読み込んだり、重い処理を同期的に行うとレスポンス速度に影響します。必要な情報だけを効率的に扱うことが重要です。

非同期処理との組み合わせ

useRequestEvent は同期的にリクエスト情報を取得しますが、認証や外部 API 呼び出しなど非同期処理と組み合わせる場合は、async 関数内で適切に扱いましょう。

6. まとめ

useRequestEvent は Nuxt のサーバーサイド処理において、現在の HTTP リクエスト情報に簡単にアクセスできる強力なツールです。API ルートやミドルウェア、SSR プラグインなどで活用することで、認証や多言語対応、アクセスログなど多様な機能を実装できます。ただし、クライアントサイドでは利用できない点やパフォーマンス面の注意も忘れずに。正しく理解し活用することで、Nuxt アプリのサーバーサイド処理をより柔軟かつ効率的に実装できるでしょう。