useRequestURL

useRequestURL コンポーザブルを使用して、受信リクエストの URL にアクセスします。

useRequestURL は、サーバーサイドとクライアントサイドの両方で動作する URL オブジェクトを返すヘルパー関数です。

キャッシュ戦略を用いたハイブリッドレンダリングを利用する際、Nitro キャッシングレイヤーを介してキャッシュされたレスポンスを処理する際には、すべての受信リクエストヘッダーが削除されます（つまり、useRequestURL は host に対して localhost を返します）。

マルチテナント環境のために、キャッシュおよびレスポンスの提供時に考慮されるヘッダーを指定するために、cache.varies オプションを定義できます。例えば、host や x-forwarded-host などです。

<script setup lang="ts">
const url = useRequestURL()
</script>

<template>
  <p>URL is: {{ url }}</p>
  <p>Path is: {{ url.pathname }}</p>
</template>

MDN ドキュメントで URL インスタンスプロパティについて読むことができます。

tips

このセクションは公式ドキュメントの翻訳ではなく、本サイト独自の補足記事です。

useRequestURL の補足解説：Nuxt でリクエスト URL を安全かつ効率的に扱うために

Nuxt アプリケーションで現在のリクエスト URL を取得したい場面は多々あります。たとえば、動的なメタタグの設定や、API リクエストのベース URL の決定、あるいはマルチテナント対応のためのホスト名判別などです。useRequestURL は、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の両方で動作し、標準の URL オブジェクトを返すため、こうしたニーズに非常に便利です。

しかし、Nuxt のレンダリング戦略や Nitro のキャッシュレイヤーの影響を受けるため、単純に使うだけでは思わぬ挙動やパフォーマンス問題に直面することもあります。本記事では、useRequestURL の基本的な使い方から、実務での具体的なユースケース、そして注意すべきポイントまでを詳しく解説します。

まず結論：useRequestURL のポイントまとめ

SSR/CSR 両対応で URL オブジェクトを取得できるため、環境を意識せずに使いやすい
返される URL はリクエストのホストやパスを含み、標準の URL API が利用可能
Nitro のキャッシュレイヤーを介したレスポンスでは、リクエストヘッダーが削除されるため、host が localhost になることがある
マルチテナント対応やキャッシュ制御には、cache.varies オプションで考慮すべきヘッダーを指定する必要がある
クライアント側ではブラウザの location 情報を元に URL が生成されるため、SSR と CSR で差異が生じる可能性がある

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

使うべきケース

動的なページ情報の取得：現在の URL パスやクエリパラメータを元にコンテンツを切り替えたい場合
SEO 対応：メタタグやOGPタグの URL を動的に設定する際に、正確なリクエスト URL が必要なとき
マルチテナント環境：ホスト名を判別して表示内容や API エンドポイントを切り替える場合
API リクエストのベース URL 設定：サーバーサイドとクライアントサイドで同じ URL 情報を使いたいとき

使わない方がよいケース

単純にクライアントの現在の URL を取得したいだけなら、window.location を直接使う方が軽量
キャッシュされたレスポンスで正確なホスト名が必要な場合は、useRequestURL のみでは不十分で、キャッシュ設定の調整が必要
URL 情報が不要なロジックに無理に組み込むとパフォーマンスや保守性が落ちる

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

1. 動的メタタグの設定

SEO 対策でページごとに正しい URL をメタタグに設定したい場合、useRequestURL で現在の URL を取得し、OGP などに利用します。

<script setup lang="ts">
const url = useRequestURL()
const fullUrl = url.href
</script>

<template>
  <head>
    <meta property="og:url" :content="fullUrl" />
    <meta property="og:title" content="ページタイトル" />
  </head>
  <div>
    <h1>現在のURL: {{ fullUrl }}</h1>
  </div>
</template>

2. マルチテナント対応でホスト名による切り替え

複数のドメインで同じ Nuxt アプリを運用する場合、ホスト名を判別して表示内容や API エンドポイントを切り替えます。

const url = useRequestURL()
const host = url.host

if (host === 'tenant1.example.com') {
  // テナント1用の設定
} else if (host === 'tenant2.example.com') {
  // テナント2用の設定
}

3. API リクエストのベース URL 設定

サーバーサイドとクライアントサイドで同じ URL 情報を使い、API のベース URL を動的に決定します。

const url = useRequestURL()
const apiBase = `${url.protocol}//${url.host}/api`

fetch(`${apiBase}/data`).then(...)

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

1. Nitro キャッシュレイヤーによるヘッダー削除

ハイブリッドレンダリングで Nitro のキャッシュを使う場合、キャッシュされたレスポンスのリクエストヘッダーは削除されます。そのため、useRequestURL は host に localhost を返すことがあります。これにより、マルチテナント判別や正確な URL 取得ができなくなるケースがあります。

対策として、Nitro の cache.varies オプションで host や x-forwarded-host などのヘッダーをキャッシュのバリエーションに含める設定が必要です。

2. SSR と CSR での URL 差異

サーバーサイドではリクエストヘッダーから URL を取得しますが、クライアントサイドではブラウザの window.location を元に URL が生成されます。これにより、SSR と CSR で URL 情報に差異が生じることがあります。特にプロキシやリバースプロキシを挟む環境では注意が必要です。

3. パフォーマンスへの影響

useRequestURL は軽量ですが、頻繁に呼び出すと不要な処理が増える可能性があります。特に URL の一部だけを使う場合は、必要な部分だけをキャッシュして使う工夫が望ましいです。

まとめ

useRequestURL は Nuxt で SSR/CSR 両対応の URL 情報を簡単に取得できる便利なコンポーザブルです。動的なメタタグ設定やマルチテナント対応、API ベース URL の決定など、実務での活用範囲は広いです。

ただし、Nitro のキャッシュレイヤーの影響や SSR と CSR の差異、パフォーマンス面の注意点を理解し、適切に使うことが重要です。特にキャッシュ戦略を採用する場合は、cache.varies の設定を忘れずに行いましょう。

Nuxt アプリの URL 関連処理を安全かつ効率的に実装するために、本記事のポイントを参考にしてみてください。

MDN の URL API ドキュメントも合わせて参照すると、URL オブジェクトの詳細な使い方が理解できます。

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/use-request-url