refreshNuxtDataとは？〜非同期データの再取得を簡単に

Nuxtアプリケーションでは、useAsyncDataやuseFetchなどのComposableを使って非同期データを取得します。これらのデータは初回のページレンダリング時にフェッチされますが、ユーザー操作や外部イベントに応じて最新のデータに更新したいケースが多々あります。そんなときに役立つのがrefreshNuxtDataです。

refreshNuxtDataは、アプリケーション内の全て、または指定したキーに対応する非同期データを再取得（リフレッシュ）するための関数です。これにより、手動で個別のデータ取得ロジックを呼び出すことなく、まとめてデータを更新できるため、開発効率が向上します。

まず結論：refreshNuxtDataのポイント

• 全データまたは特定のキーの非同期データを再取得できる
• Promiseを返すため、リフレッシュ完了を待ってUI制御が可能
• keysパラメータは省略可能。省略時は全てのasyncData/fetchが対象
• <KeepAlive>でキャッシュされたコンポーネント内のデータも再取得される
• 個別のasyncDataインスタンスがあれば、そのrefreshやexecuteを使う方が推奨される

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

使うべきケース

• 複数の非同期データを一括で更新したいとき
  例：ユーザー操作で複数のAPIデータをまとめて最新化したい場合

• ページ全体のデータをリフレッシュして最新状態に保ちたいとき
  例：リアルタイム性が求められるダッシュボードなど

• コンポーネント単位ではなく、アプリケーション全体の非同期データを管理したいとき

使わない方がよいケース

• 単一のasyncDataインスタンスだけを更新したい場合
  → そのインスタンスのrefreshやexecuteメソッドを直接呼ぶ方が明示的で安全

• 頻繁に大量のデータをリフレッシュするとパフォーマンスに影響が出る場合
  → 必要なデータだけを絞って更新する設計が望ましい

• SSR（サーバーサイドレンダリング）直後の初期ロード時に使う必要はない
  → 初期フェッチは自動で行われるため

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

1. ユーザー操作で全データをリフレッシュ

ユーザーが「最新情報を取得」ボタンを押したときに、全ての非同期データを再取得してUIを更新します。

<script setup lang="ts">
import { ref } from 'vue'
import { refreshNuxtData } from '#app'

const isRefreshing = ref(false)

async function refreshAllData() {
  isRefreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    isRefreshing.value = false
  }
}
</script>

<template>
  <button :disabled="isRefreshing" @click="refreshAllData">
    最新情報を取得
  </button>
</template>

2. 特定のキーに対応するデータだけを更新

複数の非同期データのうち、userとnotificationsだけを更新したい場合。

<script setup lang="ts">
import { ref } from 'vue'
import { refreshNuxtData } from '#app'

const loading = ref(false)

async function refreshSelected() {
  loading.value = true
  try {
    await refreshNuxtData(['user', 'notifications'])
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <button @click="refreshSelected" :disabled="loading">
    ユーザーデータと通知を更新
  </button>
</template>

3. <KeepAlive>でキャッシュされたコンポーネントのデータ更新

<KeepAlive>でキャッシュされたコンポーネントはアンマウントされないため、通常のライフサイクルフックでは再取得されません。refreshNuxtDataを使うことで、非アクティブ状態でもデータを強制的に更新できます。

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

SSRとCSRの違いに注意

• SSR時は初期データがサーバーで取得されているため、refreshNuxtDataは主にクライアントサイドでの再取得に使います。
• CSRでの頻繁なリフレッシュはAPI負荷やパフォーマンスに影響するため、必要なタイミングでのみ呼び出しましょう。

Hydration（ハイドレーション）との関係

• 初回レンダリング時のデータとクライアント側の状態が一致しないとHydrationエラーが発生する可能性があります。
• refreshNuxtDataはユーザー操作後など、明示的にデータを更新したいタイミングで使うのが安全です。

パフォーマンス面の注意

• 全ての非同期データを一度にリフレッシュすると、APIリクエストが集中し負荷が高まることがあります。
• 可能な限り必要なキーだけを指定して更新する設計を心がけましょう。

asyncDataインスタンスの直接操作推奨

• もし特定のasyncDataインスタンスにアクセスできるなら、そのrefreshやexecuteメソッドを使う方が明示的でトラブルが少ないです。

まとめ

refreshNuxtDataは、Nuxtアプリケーション内の非同期データを効率的に再取得できる便利な関数です。複数のデータをまとめて更新したい場合や、キャッシュされたコンポーネントのデータを強制的に最新化したい場合に特に有効です。ただし、パフォーマンスやHydrationの観点から、使うタイミングや対象データは慎重に選びましょう。実務では、必要なキーだけを指定して更新したり、個別のasyncDataインスタンスのメソッドを活用することも検討してください。