NuxtLinkのプリフェッチトリガー
次に紹介するのは、NuxtLinkコンポーネントのプリフェッチに関する変更です。
NuxtLinkのプリフェッチ
NuxtLinkコンポーネントは、言わずと知れたリンクを生成するコンポーネントであり、Nuxtアプリケーションの根幹をなすものです。このコンポーネントは、リンク先を自動でプリフェッチ（先読み）する機能を持っています。
具体的には、リンクがビューポート（ブラウザの表示領域）に表示されたり、ユーザーがスクロールしたりするとプリフェッチが行われます。さらに、ブラウザが他の処理で忙しい場合や、ネットワークがオフライン・低速な場合はプリフェッチが自動的に抑制されるため、ユーザー体験を損なうことなくパフォーマンスを向上させます。
プリフェッチを制御できるprefetch-on属性
もしこの自動プリフェッチを無効にしたい場合は、no-prefetch属性を記述するか、v-bind:prefetch属性をfalseとします。これに加え、バージョン3.13からは、単にプリフェッチを行うか否かだけでなく、より細かくタイミングを制御できるようになりました。それがprefetch-on属性です。
<NuxtLink v-bind:to="{name: 'one'}" prefetch-on="visibility">
属性値は、表1のものが指定できます。
| 属性値 | 内容 |
|---|---|
| visibility | リンクがビューポートに表示されたらプリフェッチを行う |
| interaction | リンクがホバーされるかフォーカスされるとプリフェッチを行う |
prefetch-onの属性値としては、先のコードのように片方のみを指定する方法もありますが、次のコードのようにオブジェクトを指定することで、両方を指定することも可能です。
<NuxtLink v-bind:to="{name: 'one'}" prefetch-on="{ visibility: true, interaction: true }">
prefetch-on属性の導入により、開発者はアプリケーションのパフォーマンス要件やユーザーの操作感を考慮しながら、よりきめ細やかにプリフェッチの挙動を制御できるようになりました。
レンダリングを限定できる拡張子
最後に紹介するのは、バージョン3.11で導入された拡張子である.client.vueと.server.vueです。拡張子から想定できるように、ページコンポーネントに対してレンダリングするタイミングを限定する仕組みです。
これまでも、レンダリングをクライアントサイドに限定するにはClientOnlyコンポーネントが使われていました。しかし、.client.vueを使用することで、このClientOnlyコンポーネントの機能をページ全体に適用できます。例えば、リスト6はその具体例です。
<script setup lang="ts"> const now = ref(new Date()); </script> <template> <p><NuxtTime v-bind:datetime="now" locale="ja-JP" timeStyle="full"/></p> </template>
このページを表示させた際、サーバサイドでレンダリングされるタグは、以下の空のdivタグのみとなります。
<div id="__nuxt"><div></div></div>
その後、ブラウザでクライアントサイドレンダリングが実行され、結果的に次のタグが生成されます。
<div id="__nuxt"> <p><time datetime="2026-02-16T05:03:52.890Z">14時03分52秒 日本標準時</time></p> </div>
一方、上記のリスト6と同じコードをnow.server.vueとして作成した場合、このページにアクセスすると、以下のようにサーバーサイドで完全にレンダリングされたタグが生成されます。
<div id="__nuxt"><div> <p><time data-locale="ja-JP" data-time-style="full" datetime="2026-02-16T05:07:45.230Z" data-prehydrate-id=":NIiDfe5__B:">14時07分45秒 日本標準時</time></p> </div></div>
まとめ
Nuxtのバージョン4.3までの変更点をテーマごとに紹介する本連載の第2回目は、いかがでしたでしょうか。今回は、コンポーザブルやコンポーネントに関して、変更されたものや新たに追加されたものをいくつか紹介しました。
バージョン4.3までをまとめた内容としては、今回で一旦終了しますが、Nuxtは今後も進化を続けます。新たなバージョンの変更点にも注目し、機会があればまた紹介していきたいと思います。
