Nuxt とは？

Vueは画面を作るJavaScriptフレームワークだよ。NuxtはVueを土台に、URLに対応するページの管理、データ取得、サーバー処理、ビルドなどを統合している。VueでもSSRはできるけれど、Nuxtならサイト全体を組み立てる仕組みを利用できるんだ。

Nuxt 4の標準構成では、たとえばapp/pages/about.vueを作ると/aboutのページに対応するよ。ページ表示の仕組みはVue Routerを基盤にしている。自分でapp/app.vueを用意する場合は、その中にNuxtPageコンポーネントを置いて現在のページを表示するんだ。

SSRはサーバー側でHTMLを作って返す方式で、Nuxtの初期設定はこの仕組みを使う。静的生成はビルド時にHTMLを用意する方式だよ。図のように公開時期が決まった案内ページと、要求に合わせて変わるページでは向く方法が違う。ブラウザー側だけで描画する設定も選べるんだ。

routeRulesで、事前生成するページやブラウザー側で描画するページなどを指定できる。キャッシュしながら更新する仕組みもあるよ。ただしISRは対応する配信先のCDNなどが必要で、nuxt generateによる静的出力ではハイブリッド描画は使えない。すべての配信方法で同じ機能が動くわけではないんだ。

Node.jsサーバー、静的ホスティング、サーバーレスなどに対応しているよ。静的出力では、実行時のサーバーAPIや要求ごとのSSRは提供できない。ログインやデータ更新など、必要な機能が動く配信方式を選んで、Nitroの対応する設定でビルドするんだ。