Nuxt 3.15 で追加された callOnce のナビゲーションモードについて

callOnce

SSR もしくは CSR で処理を一度だけ実行することができる composable です。

Nuxt v3.9 から使えるようになりました。

ユースケースとしては、state の初期化を行う場合などです。

State Management · Get Started with Nuxt

Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state.

https://nuxt.com/docs/getting-started/state-management#initializing-state

ナビゲーションモード

Nuxt 3.15 で新たに追加された機能です。

Nuxt 3.15 · Nuxt Blog

Nuxt 3.15 is out - with Vite 6, better HMR and faster performance

https://nuxt.com/blog/v3-15#️-navigation-mode-for-callonce

公式サイトにも記載がありますが、下記のように { mode: 'navigation' } を指定することでナビゲーションモードを有効にすることができます。

await callOnce(() => counter.value++, { mode: 'navigation' })

middleware と callOnce のナビゲーションモードの違いについて

ページ遷移の度に実行することができるという説明を聞くと、middleware と役割が似ているように感じます。

大きな違いとして、処理が実行されるタイミングが異なります。

middleware で定義される処理はナビゲーションの前に実行されます。

そのため、middleware には、ログイン状態のチェックや閲覧権限のチェック等の処理を定義するのが向いています。

逆に callOnce のナビゲーションモードはナビゲーションのタイミングで実行されるため、タイミングとしては middleware よりも後に実行されます。

そのため、callOnce には、状態等のデータの初期化等の処理を定義するのが向いています。