こんにちは、かつコーチです。
「Vue.jsは触ったことがあるけど、Nuxt.jsって何が違うの？」
そんな疑問を持ってこの記事にたどり着いた方も多いと思います。
今回は、Nuxt.jsがどんな役割を持つツールなのか、初心者向けに整理していきます。
読み終える頃には、「なぜVueだけでなくNuxtが必要なのか」が言葉で説明できるようになります。
Nuxt.jsとは？
Vue.jsとの関係
Nuxt.jsは、Vue.js製のメタフレームワークです。
メタフレームワークとは、既存のフレームワークの上に構築された、より高機能な枠組みのことです。
Vue.js自体は「画面の部品（コンポーネント）を組み立てる」ためのライブラリです。
ですが、実際のWebサービスを作るには、Vueだけでは足りない機能がたくさんあります。
- ページごとのURLを割り当てる仕組み（ルーティング）
- 検索エンジンに強いページの出力方法
- サーバー側の処理をまとめて書ける仕組み
Nuxt.jsは、これらをVue.jsに「足して」くれるフレームワークです。
イメージとしては、Vueが「材料」だとすると、Nuxtは「調理器具一式が揃ったキッチン」です。
材料だけでも料理はできますが、道具が揃っていた方が圧倒的に効率よく作れます。
ReactにおけるNext.jsと同じ構図
この関係性は、実はReactの世界にもそっくりそのまま存在します。
Reactに対するNext.jsが、Vue.jsに対するNuxt.jsと同じ立ち位置です。
| 元になるライブラリ | メタフレームワーク |
|---|---|
| React | Next.js |
| Vue.js | Nuxt.js |
私は最初にReact→Next.jsの順で学んだのですが、後からVue→Nuxtを触ったとき「あ、構図が全く同じだ」と腑に落ちました。
「〇〇.jsに対する△△.js」というペアの考え方を一度理解しておくと、他のフレームワークを学ぶときにも応用が効きます。
なぜSSR/SSGが必要なのか
SSR・SSGとは何か
Nuxt.jsを語るうえで欠かせないのが、SSRとSSGという2つの言葉です。
SSR（サーバーサイドレンダリング）とは、サーバー側でHTMLを組み立ててからブラウザに送る仕組みです。
SSG（静的サイト生成）とは、ビルド時にあらかじめHTMLファイルを生成しておく仕組みです。
これに対して、Vue.jsを素の状態で使う場合はCSR（クライアントサイドレンダリング）が基本になります。
CSRとは、ブラウザ側でJavaScriptを実行してから画面を組み立てる仕組みです。
なぜCSRだけでは不十分なのか
CSRには弱点があります。
代表的なのが、検索エンジン対策（SEO）とページの初期表示速度です。
CSRの場合、ブラウザが最初に受け取るHTMLはほぼ空っぽです。
JavaScriptが実行されて初めて、画面に文字や画像が表示されます。
検索エンジンのクローラーによっては、この「空っぽのHTML」しか読み取れないことがあります。
また、ユーザーから見ても、画面が真っ白な時間が長くなりがちです。
私が個人ブログをVueだけで作っていた頃、Googleの検索順位が思うように上がらず悩んだ経験があります。
SearchConsoleで確認すると、記事ページの本文がほとんどインデックスされていませんでした。
原因を調べていくうちに、CSRのままではクローラーに本文が正しく読み取られていないことに気づきました。
Nuxt.jsが解決してくれること
Nuxt.jsを使うと、SSRやSSGを比較的簡単に導入できます。
サーバー側やビルド時にあらかじめHTMLを組み立てておけるので、次のようなメリットがあります。
- 検索エンジンが記事の内容を正しく読み取れる
- ページを開いた瞬間から、ある程度の内容が表示される
- ユーザーが「読み込みが遅い」と感じにくくなる
先ほどの私の失敗も、記事一覧ページをNuxtのSSGで作り直したことで、数週間後にはインデックス数が改善しました。
「Vueで動的な画面を作りつつ、SEOにも強くしたい」というときに、Nuxt.jsが選ばれる理由がここにあります。
Nuxt.jsでできること
主な機能の全体像
Nuxt.jsが標準で提供している主な機能は、次の通りです。
- ファイルベースルーティング：
pages/ディレクトリにファイルを置くだけでURLが決まる仕組み - データフェッチ用の専用関数：
useFetchやuseAsyncDataなどでAPI通信を簡単に書ける仕組み - サーバーAPI機能：
server/api/にファイルを置くだけで、簡易的なバックエンドAPIを作れる仕組み
これらは今後の記事で、それぞれ詳しく取り上げていきます。
どんな人にNuxt.jsが向いているか
Nuxt.jsは、次のような人に特に向いています。
- Vue.jsの基本文法はひと通り理解している
- SEOを意識したサイトやブログを作りたい
- ページ数の多いサービスをスピーディーに構築したい
逆に、極端に小規模なランディングページ1枚だけを作りたい場合は、Nuxtの機能をフルに使い切れないこともあります。
まずは小さめの個人サイトから触ってみて、感覚をつかんでいくのがおすすめです。
まとめ
この記事のポイント
- Nuxt.jsはVue.jsのメタフレームワークで、ReactにおけるNext.jsと同じ構図
- SSR/SSGにより、SEOと表示速度の弱点をカバーできる
- ファイルベースルーティングやサーバーAPIなど、実務で役立つ機能が標準搭載されている
次に読むべき記事
次回は、実際に手元でNuxt.jsのプロジェクトを作成する手順を解説します。
「create-nuxtでプロジェクトを作成する手順」を読みながら、一緒に環境構築を進めていきましょう。
