callOnce

ソース
SSRまたはCSR中に指定された関数またはコードブロックを一度だけ実行します。
このユーティリティはNuxt v3.9以降で利用可能です。

目的

callOnce関数は、指定された関数またはコードブロックを以下の期間中に一度だけ実行するように設計されています。

  • サーバーサイドレンダリング中（ハイドレーション中ではない）
  • クライアントサイドナビゲーション中

これは、イベントのログ記録やグローバルな状態の設定など、一度だけ実行する必要があるコードに役立ちます。

使用方法

callOnceのデフォルトモードは、コードを一度だけ実行することです。たとえば、コードがサーバー上で実行された場合、クライアント上では再度実行されません。また、このページに再度ナビゲートするなど、クライアント上で複数回callOnceを呼び出しても、再度実行されることはありません。

app/app.vue
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

最初のサーバー/クライアントの二重読み込みを回避しつつ、すべてのナビゲーションで実行することも可能です。そのためには、navigationモードを使用することができます。

app/app.vue
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once and then on every client side navigation')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
}, { mode: 'navigation' })
</script>
navigationモードはNuxt v3.15以降で利用可能です。
callOnceは、ストアアクションを呼び出すためにPiniaモジュールと組み合わせて使用すると便利です。
詳細については、Docs > 4 X > Getting Started > State Managementを参照してください。
callOnceは何も返さないことに注意してください。SSR中にデータフェッチを行いたい場合は、useAsyncDataまたはuseFetchを使用する必要があります。
callOnceは、ページのハイドレーション時にクライアントで関数が再呼び出しされるのを避けるためにNuxtペイロードにデータを追加する必要があるため、セットアップ関数、プラグイン、またはルーとミドルウェアで直接呼び出されることを意図したコンポーザブルです。

タイプ

署名
export function callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
export function callOnce (fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>

type CallOnceOptions = {
  /**
   * Execution mode for the callOnce function
   * @default 'render'
   */
  mode?: 'navigation' | 'render'
}

パラメーター

  • key: コードが一度だけ実行されることを保証する一意のキー。callOnceインスタンスのファイルと行番号に一意のキーが生成されます。
  • fn: 一度だけ実行される関数。非同期にすることも可能です。
  • options: モードを設定します。ナビゲーション時に再実行するか（navigation）、アプリのライフタイム中に一度だけ実行するか（render）。デフォルトはrenderです。
    • render: 初回レンダリング時（SSRまたはCSR）に一度実行されます - デフォルトモード
    • navigation: 初回レンダリング時に一度、その後のクライアントサイドナビゲーションごとに一度実行されます。