callOnce
SSR または CSR 中に指定された関数やコードブロックを一度だけ実行します。
このユーティリティは Nuxt v3.9 から利用可能です。
目的
callOnce 関数は、以下の状況で指定された関数やコードブロックを一度だけ実行するように設計されています：
- サーバーサイドレンダリング中（ハイドレーション時は除く）
- クライアントサイドナビゲーション中
これは、イベントのログ記録やグローバルな状態の設定など、一度だけ実行すべきコードに役立ちます。
使用法
callOnce のデフォルトモードは、コードを一度だけ実行することです。例えば、コードがサーバーで実行されると、クライアントでは再度実行されません。また、クライアントで callOnce を複数回呼び出しても、例えばこのページに戻ってきた場合でも再度実行されません。
app/app.vue
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('これは一度だけログに記録されます')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})初回のサーバー/クライアントの二重読み込みを避けつつ、すべてのナビゲーションで実行することも可能です。そのためには、navigation モードを使用することができます：
app/app.vue
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('これは一度だけログに記録され、その後はすべてのクライアントサイドナビゲーションで実行されます')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
}, { mode: 'navigation' })navigation モードは Nuxt v3.15 から利用可能です。
callOnce は、ストアアクションを呼び出すために Pinia モジュール と組み合わせて使用するのに便利です。
callOnce は何も返しません。SSR 中にデータフェッチを行いたい場合は、useAsyncData または useFetch を使用してください。
callOnce は、セットアップ関数、プラグイン、またはルートミドルウェアで直接呼び出されることを意図したコンポーザブルです。これは、ページがハイドレートされる際にクライアントで関数を再度呼び出さないように、Nuxt ペイロードにデータを追加する必要があるためです。
型
callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
type CallOnceOptions = {
/**
* callOnce 関数の実行モード
* @default 'render'
*/
mode?: 'navigation' | 'render'
}
パラメータ
key: コードが一度だけ実行されることを保証するための一意のキー。キーを指定しない場合、callOnceのインスタンスのファイルと行番号に固有のキーが生成されます。fn: 一度だけ実行する関数。非同期であることができます。options: モードを設定します。ナビゲーション時に再実行する（navigation）か、アプリのライフタイムで一度だけ実行する（render）かを選択します。デフォルトはrenderです。render: 初回レンダリング中に一度実行（SSR または CSR） - デフォルトモードnavigation: 初回レンダリング中に一度、そしてその後のクライアントサイドナビゲーションごとに一度実行