Nuxt 4.5リリース、Vite 8とRspack 2でビルド基盤を刷新
Nuxt 4.5の全体像とNuxt 5への布石
2026年7月18日、Vue.jsベースのフルスタックフレームワーク「Nuxt」の最新メジャーアップデート、バージョン4.5が公開された。今回のリリースは、ビルド基盤の刷新から実験的なSSRストリーミング、新たなコンポーザブルや安定したエラーコードシステムの導入に至るまで、多岐にわたる変更を含む大規模なものだ。同時に、次のメジャーバージョンであるNuxt 5に向けた内部的な準備が大きく進んだ節目でもある。
Nuxtチームの声明によれば、本リリースの大きな柱は3つある。Vite 8への移行、Rspack 2とRsbuildによるビルダーの再構築、そして実験的機能として提供されるSSRストリーミングだ。これらはいずれも開発体験と本番環境のパフォーマンスに直結するテーマであり、エンジニアにとっては見逃せないポイントが詰まっている。また、Nuxt 3系の最終ラインとなるv3.21.9も同時にリリースされ、3系ユーザーはv4への移行が推奨される状況となった。
上図のように、Nuxt 4.5は過去と未来をつなぐ架け橋の役割を担っている。3系から4系への移行は比較的スムーズだったとの声が多く、公式のアップグレードガイドも継続的にメンテナンスされている。v4.5で入った基盤変更の多くは「将来のv5への移行をできるだけ退屈にする」ための仕込みだ。チームは今後、Nuxt 5の安定化と互換性ユーティリティの作成に注力する方針を示している。
ビルド基盤の刷新 〜 Vite 8 と Rspack 2 + Rsbuild
Vite 8 への移行と開発体験の向上
Nuxt 4.5の内部では、ビルドツールがVite 8に引き上げられた。Vite 8はRolldownを採用した次世代の内部アーキテクチャを持ち、コールドスタートの高速化やHMR（Hot Module Replacement）の安定性向上が図られている。Nuxtブログの記事によれば、多くのアプリケーションにとってこのアップグレードは透過的であり、特別な設定変更なしに恩恵を受けられるという。
とはいえ、独自のViteプラグインやvite.configに手を加えているプロジェクトでは、Viteの移行ガイドを確認したほうが安全だ。エコシステム内のプラグインの中には特定のViteバージョンに依存しているものもあるため、本番環境に適用する前に互換性を検証することが推奨される。
Rspack 2 と Rsbuild ベースの新ビルダー
Rspackビルダーを利用しているプロジェクトにとっては、今回の変更はより大きな意味を持つ。Nuxt 4.5ではRust製バンドラであるRspackがバージョン2にアップデートされ、さらにそのビルダーはRsbuild（Rspackをラップする高レベルツール）を基盤とする形に再構築された。
パブリックなインターフェースは変わらず、従来通り builder:'rspack' の設定で利用できる。内部では、開発サーバーがRsbuildのミドルウェアモードで動作するようになり、webpack-dev-middlewareやwebpack-hot-middlewareが置き換えられた。また、SSR時のスコープ付きスタイルIDや厳密なESM解決のためにRspack専用のVueローダーが新たに導入されている。
この変更により、ビルド時間の短縮や開発サーバーの応答性向上が期待できる。Nuxtブログの記事では「内部的には全面的にRsbuildに移行したが、外部からはほとんど意識させない」と説明されており、アップグレード時の学習コストは低く抑えられている。
実験的SSRストリーミングで変わる初期表示速度
Nuxt 4.5で導入された実験的機能の中でも、特に注目度が高いのがSSRストリーミングだ。これは従来のサーバーサイドレンダリング（SSR）の常識を覆し、First Contentful Paint（FCP）やTime to First Byte（TTFB）を大幅に改善する可能性を秘めている。
従来のSSRとの違い
これまでのNuxtのSSRでは、サーバー側でページ全体のレンダリングが完了するまでHTMLのバッファリングを行い、完成したレスポンスを一括でクライアントに送信していた。これに対し、SSRストリーミングでは、HTMLの骨格部分（head要素、スタイル、プリロードヒント、エントリースクリプト）を直ちにフラッシュし、その後Vueがボディをレンダリングしながらストリームで送り出す仕組みになっている。
ブラウザはhead部分を受け取った時点でCSSやフォントのダウンロードを開始できるため、ユーザーは白い画面を待たされる時間が減る。特にヒーローイメージや重いスクリプトを次のページでプリロードしたいケースでは、その効果が顕著になるだろう。
クローラー対応と注意点
検索エンジンのボットに対しては、SSRストリーミングが自動的に無効化され、従来通り完全にレンダリングされたHTMLが返される。ユーザーエージェントの正規表現でカスタマイズも可能で、特定のルートだけストリーミングを無効にすることもできる。
ただし、ストリーミングを有効にする前に理解しておくべき制約が1つある。ストリーミングではHTTPステータスコードやヘッダーが最初のバイトで確定するため、レンダリング中にレスポンスを変更する処理（例えばsetup内でのsetResponseStatusやミドルウェアでのCookie書き込み）はクライアントに届かなくなる。Nuxtはリダイレクトやキャッシュルールなど、よくあるケースについては自動的にバッファリングレンダラーにフォールバックする仕組みを備えている。開発時には、ドロップされたミューテーションを警告で通知してくれるため、予期せぬ不具合に気づきやすい。
安定したエラーコードと新しいコンポーザブル
Nuxt 4.5では開発者体験を向上させる構文やユーティリティが複数追加された。その中でも、全開発者に影響がある安定したエラーコードシステムと、実務で即戦力となる新コンポーザブルについて解説する。
nostics ベースの安定エラーコード
Nuxtは今回、nosticsという仕組みを採用し、ビルド時や実行時の警告・エラーに「NUXT_E1001」のような不変のコードを付与するようになった。各コードには、なぜそれが発生したのかの説明と具体的な修正案がインラインで表示される。さらに、1行では説明しきれないエラーは専用のドキュメントページにリンクされる。
たとえば「コンポーザブルがNuxtコンテキスト外で呼ばれた」という古くからのエラーは、NUXT_E1001としてコード化され、runWithContext()の使い方まで含めた解説ページが用意された。本番ビルドでは冗長なテキストが削除され、コードだけが残るため、バンドルサイズへの影響も最小限に抑えられている。
この仕組みは、エラーの切り分けやチーム内での情報共有を格段に容易にする。Nuxtブログの記事では「この基盤の上に、さらに優れたエラーメッセージを積み重ねていく」と述べられており、今後のリリースでも拡充が続く見込みだ。
useLayout コンポーザブルと名前付きビュー
新たに追加された useLayout コンポーザブルは、現在のルートに解決されたレイアウト名をリアクティブに取得できる。これまではコンポーネント内から「このページはどのレイアウトを使っているか」をクリーンに知る手段がなく、工夫が必要だった。useLayoutは読み取り専用のcomputed refを返すため、ナビゲーションに応じて自動的に値が更新される。
さらに、名前付きビュー（Named Views）のサポートも公式に組み込まれた。親ページが複数の <NuxtPage> アウトレットをレンダリングする場合、ファイル名に 名前@ビュー名.vue の規約を使うことで、各アウトレットに対応するページコンポーネントを配置できる。これはVue Routerでは以前から可能だった機能を、Nuxtのファイルベースルーティングに統合したものだ。
useFetch / useAsyncData の enabled オプション
データフェッチの制御が柔軟になったのも地味に嬉しいポイントだ。useFetchやuseAsyncDataに enabled オプションが追加され、条件を満たすまでリクエストをブロックできるようになった。enabledがfalseの間は、初回フェッチも手動のexecute/refreshも、ウォッチャーによるトリガーもすべて抑制される。trueからfalseに変わった場合は実行中のリクエストがキャンセルされ、既存のdataは維持されるため、UIの一貫性を保ちやすい。
Nuxtブログの記事では、検索窓の入力が2文字を超えるまでAPIを叩かない、というユースケースが例示されている。依存関係の多いクエリや条件付きのデータ取得が必要な画面で、コードをシンプルに保てるだろう。
パフォーマンス改善とアップグレード時の注意点
Nuxt 4.5では、上記の主要機能に加えて、開発サーバーの起動高速化や本番ビルドのスリム化といったパフォーマンス改善も多数盛り込まれている。たとえば、NuxtがViteのファイルウォッチャーを共有する「共有ウォッチャー」モードは、メモリ使用量とファイルハンドル数を削減し、大規模プロジェクトでの起動時間を短縮する。この機能は将来のデフォルトだが、今すぐ experimental.watcher:'builder' で試すことができる。
また、プロダクションビルドでは、アイランド（Islands）を使用しない場合にアイランドレンダラーのチャンクが丸ごと省略されるなど、不要なコードの除去も進んだ。これらは設定不要で自動的に適用される。
アップグレード前に確認すべきポイント
今回のリリースはメジャーな依存関係のアップグレードを3つ含んでいるため、アップグレード時にはいくつか注意点がある。Nuxtチームが推奨するアップグレードコマンドは npx nuxt upgrade --dedupe で、ロックファイルの重複を整理しつつ、関連するunjsエコシステムのパッケージもまとめて更新できる。
- Vite 8：カスタムViteプラグインやvite.configの特殊設定がある場合、Viteの移行ガイドを事前に確認する
- Rspack 2：builder: ‘rspack’ を使用中の場合、内部がRsbuildベースに切り替わっているため、独自のRspack設定を見直す必要があるかもしれない
- unhead v3：useHeadの型が厳格化され、v2で許容されていた一部のコードが型エラーになる可能性がある。ただしランタイム動作は幅広く互換性が保たれている
これらの確認を経れば、多くのプロジェクトはスムーズに移行できるだろう。Nuxtブログの記事でも「大半のアプリでは透過的なアップグレードになる」とされており、恐れるほどの破壊的変更は限定的だ。
この記事のポイント
- Nuxt 4.5はVite 8、Rspack 2 + Rsbuildへの移行によりビルドパフォーマンスが底上げされた。v5への布石として内部基盤の刷新が進んでいる
- 実験的SSRストリーミングを有効にすると、HTMLシェルを先に送信しTTFBを改善できる。クローラーには自動で従来のSSRが提供される
- 安定エラーコードシステムにより、エラーの原因と修正法がコードベースで即座に把握可能になり、開発生産性が向上する
- useLayout、名前付きビュー、enabledオプションなど、実務ですぐ使える新構文が追加された
- アップグレード時はVite 8、Rspack 2、unhead v3の3点を中心に互換性を確認すれば、多くのプロジェクトはスムーズに移行できる
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
Cloudflare Workers Cache登場、Worker専用キャッシュでコスト削減
Workers Cache の登場でCloudflare Workersが「オリジン」から「静的配信」へ進化
CloudflareがWorkers Cacheを正式にリリースした。これは単なるキャッシュ機能の追加ではない。Workersのアーキテクチャを根本から覆し、コストとパフォーマンスのトレードオフを解消する大きな転換点だ。一言で表せば「あなたのWorkerの前に、そのWorker専用のキャッシュを置ける機能」である。
1行の設定を追加するだけで、Workerが生成したレスポンスはCloudflareのエッジネットワークにキャッシュされる。キャッシュが有効な間はWorkerそのものが実行されず、CPU時間の課金もゼロになる。これは特に、サーバーサイドレンダリング（SSR）を行うアプリケーションにとって、待望のソリューションだ。
本記事では、なぜこの機能が必要とされていたのか、具体的に何が変わるのか、そして開発者がどのように活用できるのかを詳しく解説する。
問題: Workerがオリジンの場合、処理のたびにコードが実行され、キャッシュの恩恵を受けにくい。
効果: レスポンスが高速化し、WorkerのCPU実行コストが削減される。
この図が示すように、Workers Cacheはリクエストの最前線に立つ。これにより、Workerが事実上のオリジンサーバーとして振る舞う現代的なアプリケーションのパフォーマンスとコスト構造が劇的に改善される。
なぜサーバーサイドアプリに「Workerの前のキャッシュ」が必要だったのか
Workerが「経由点」から「オリジン」へ変わった世界
2017年のリリース当初、Cloudflare Workersはオリジンサーバーの手前でリクエストを書き換える「中間処理層」として設計された。A/Bテストの振り分けやヘッダーの追加といった、軽量な処理をエッジで実行するユースケースが中心だったのだ。当時、Workerはキャッシュよりもさらにオリジンに近い位置にあった。
しかし状況は一変した。AstroやNext.js、SvelteKitといった主要フレームワークが、ビルド成果物をCloudflare Workersで直接動かすアダプターを提供し始めたのである。これにより、Workerはもはや単なる中継点ではない。アプリケーションそのものがWorker上で動作する「サーバー」になった。裏側に別のオリジンサーバーは存在しなくなり、Worker自体がリクエストを処理するようになったのだ。
この変化は大きな問題を生んだ。従来のアーキテクチャでは、Workerがオリジンになると、すべてのリクエストがコードの実行を必要とするようになる。たとえ1秒前と全く同じHTMLを返す場合でも、だ。これはパフォーマンス上のレイテンシと、無視できないCPU実行コストを常に発生させることを意味していた。
静的生成と動的レンダリングのジレンマを解決する第三の道
この問題に対し、開発者はこれまで2つの選択肢から選ぶしかなかった。
- 静的サイト生成（SSG）：すべてのページをビルド時に事前生成する。表示は高速だが、コンテンツを更新するたびに全ページを再ビルドする必要がある。数千ページのサイトでは、このビルド時間が大きなボトルネックになる。
- サーバーサイドレンダリング（SSR）：リクエストのたびにページを動的に生成する。コンテンツは常に最新だが、全てのアクセスでレンダリングコストとレイテンシが発生する。
Workers Cacheはここに第三の選択肢、つまり「オンデマンドでサーバーレンダリングし、結果をキャッシュし、指定したTTL（生存期間）で更新する」という新しい手法を提供する。最初のリクエストだけがレンダリングコストを支払い、後続のリクエストはキャッシュから静的ファイルのように配信されるのだ。これはフレームワーク独自の複雑な仕組み（ISRなど）に依存しない、HTTP標準に則った解決策である。
パフォーマンスを極める主要機能「SWR」と「Vary」の内部動作
stale-while-revalidate が「待ち時間ゼロ」を実現する仕組み
Workers Cacheの真価を引き出すのが、stale-while-revalidate（SWR）ディレクティブだ。これはキャッシュされたレスポンスがTTLを超過した「古い（Stale）」状態でも、とりあえずその古いデータをユーザーに返しつつ、バックグラウンドで最新のデータを取得し直すHTTPの仕組みである。
SWRがない場合、キャッシュの有効期限が切れた後の最初のリクエストは、必ずWorkerが一からページをレンダリングするまで待たされる。しかしSWRがあれば、この最初のリクエストに対しても古いキャッシュが即座に返され、ユーザーは待ち時間を感じない。Workers CacheはこのSWRを完全にサポートしており、これによって「動的なサイトなのに、まるで静的サイトのように感じる」という体験を実現している。
この図の通り、SWRはTTLが切れた後の「最初の一人」が被る待ち時間を帳消しにする。Cloudflare Blogの記事によれば、Cloudflareは今年の早期にこのSWR機能をフルサポートしており、Workers Cacheはその上に構築されていることがわかる。
Vary ヘッダーが複数の表現をキャッシュする
現実のアプリケーションは、同じURLでもクライアントに応じて異なるレスポンスを返す必要がある。例えばブラウザにはHTMLを、APIクライアントにはJSONを返す場合や、対応状況に応じてWebPとJPEGを出し分ける場合だ。Workers Cacheは、このコンテンツネゴシエーションをHTTP標準のVaryヘッダーで解決する。
WorkerがVary: Acceptというヘッダーを付けてレスポンスを返すと、Cloudflareは「Acceptリクエストヘッダーの値」ごとに別々のキャッシュエントリを自動で作成・管理する。これにより、WebPに対応したブラウザにはWebP画像のキャッシュが、そうでない環境にはJPEG画像のキャッシュが返るようになる。開発者は複雑なキャッシュキーの設定を意識する必要はなく、標準的なHTTPのルールに従うだけで、安全かつ効率的に複数表現をキャッシュできるのだ。
開発者が知っておくべき設計思想「ゾーンではなくWorkerのキャッシュ」
エントリーポイント単位の柔軟なキャッシュ制御
Workers Cacheの最も革新的な部分は、それが「ゾーン（ドメイン）」ではなく「Worker」に紐づくという設計思想にある。この思想が、従来のCDNでは実現できなかったいくつもの高度なユースケースを可能にしている。
特に重要なのが、Workerのエントリーポイントごとにキャッシュの有効・無効を設定できる点だ。設定ファイルでエクスポート名（"default"や"CachedBackend"）を指定するだけで、認証処理を行うゲートウェイWorkerはキャッシュを無効化し（常にコードを実行するため）、その背後で重い処理を行うバックエンドWorkerだけにキャッシュを有効化する、といった構成が可能になる。
このエントリーポイント単位の制御により、キャッシュはアプリケーションアーキテクチャの一部として自然に組み込めるようになる。単一のWorkerの中に、キャッシュするレイヤーとしないレイヤーを共存させ、それらをコードで自在に結合できるのだ。これは、CDNキャッシュを単一のオリジンの前に置くという従来の考え方とは一線を画す。
マルチテナントを安全にする ctx.props の仕組み
ユーザーごとに異なる情報を返すAPIのキャッシュは、セキュリティ上の大きな課題を伴う。ユーザーAのキャッシュがユーザーBに見えてしまうような事故は、絶対に避けなければならない。Workers Cacheはこの問題を、ctx.propsの一部を自動的にキャッシュキーに含めることで根本的に解決している。
例えば、ゲートウェイWorkerで認証したユーザーIDをctx.propsにセットし、キャッシュが有効なバックエンドWorkerを呼び出すとする。Workers Cacheはこの「ユーザーID」の違いを認識し、ユーザーごとに完全に独立したキャッシュ空間を作り出す。これにより、「認証済みAPIはキャッシュできない」という固定観念を覆し、ユーザー単位で安全にレスポンスをキャッシュできるようになる。Cloudflare Blogによれば、これは他の主要CDNでは提供されていない、Workers Cache独自の強力な利点だという。
Workers Cacheがもたらすプラットフォームとしての進化
パフォーマンスとデータの近接性を両立するアーキテクチャ
Webパフォーマンスにおいては、コードを「ユーザーの近く」で実行するのと「データの近く」で実行するのは、しばしばトレードオフの関係になる。Workers Cacheはこのジレンマに対して、キャッシュを「糊（にかわ）」として利用する解決策を提示する。
具体的には、次のような構成が現実的になる。ユーザーの近くで動き、認証やルーティングといった軽量な処理を担当するWorker Aを配置する。一方、データベースへの重いクエリやレンダリングを実行するWorker Bを、Smart Placement機能でデータの近くに配置する。Workers Cacheは、このWorker Bの手前にのみ配置する。
リクエストが来ると、Worker Aが処理した後、サービスバインディングを通じてWorker Bを呼び出す。この時、Worker Bのキャッシュがヒットすれば、データの近くにあるWorker Bは実行されることなく、ユーザーの近くにあるキャッシュからレスポンスが返る。キャッシュミス時のみ、実際のデータへのアクセスが発生する。これにより、「ユーザー近接性」と「データ近接性」の良いとこ取りが可能になるのだ。
フレームワークとの統合とコストの透明性
Workers CacheはすでにAstroフレームワークのアダプターでネイティブサポートされている。設定ファイルに数行追加するだけで、ページ単位のTTLやタグベースのキャッシュパージが利用できる。TanStack StartやNext.js（Vinext経由）など他のフレームワークへの統合も現在進行中だ。
コスト面も明快だ。Workers Cacheのキャッシュヒット時は、通常のリクエスト課金は発生するが、WorkerのCPU実行時間に対する課金はゼロになる。キャッシュストレージに対する追加のGB単位の課金もないため、コスト削減効果を予測しやすい。ダッシュボードでは、キャッシュヒット率やヒット/ミス/バイパスの内訳が確認でき、パフォーマンスチューニングに必要なデータが一元管理されている。
この記事のポイント
- Workers Cacheは、Workerの手前に専用の階層型キャッシュを配置する新機能である。
- これにより、サーバーサイドアプリが静的サイトのような速度を実現しつつ、CPU実行コストを削減できる。
stale-while-revalidateの完全サポートにより、キャッシュ更新中もユーザーを待たせない。- ゾーンではなくWorkerに紐づく設計により、エントリーポイント単位で柔軟なキャッシュ戦略をコードで記述できる。
ctx.propsをキャッシュキーに含めることで、マルチテナント環境でも安全なキャッシュが実現する。
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験