今回は、Nuxt.jsではなにができるのかをまとめてみたいと思います。

Nuxt.jsとは

トップの画像を見ていただけると分かる通り、Vue.jsをベースとしたフレームワークで、 React.jsベースのサーバーサイドレンダリング(以下SSR)フレームワークであるNext.jsの影響を受けております。 SSRに於けるサーバーサイドとクライアントサイドのUIレンダリングを主軸とし、プロジェクトの基軸となりうる柔軟な設計となっています。

Vue.js
VueRouter
Vuex
VueServerRenderer
VueMeta

を統合的に使いやすく一つのパッケージとして提供したというのが簡単なイメージです。

依存関係に関して

Nuxt.js自体は執筆時点では最新バージョンがv1.0.0-rc11、依存関係としては下記の状態となっております。

パッケージ	バージョン
node	>=6.11
npm	>=3.10.0
vue	~2.4.2
vue-router	^2.7.0
vuex	^2.4.0
vue-server-renderer	~2.4.2
vue-meta	^1.1.0

ただし、Githubでも述べられている通り、近いうちに1.0が出る予定のため、devブランチでは対応可能バージョンは上げられており、devブランチで言うと

パッケージ	バージョン
node	>=6.11
npm	>=3.10.0
vue	^2.5.3
vue-router	^2.7.0
vuex	^3.0.1
vue-server-renderer	^2.5.3
vue-meta	^1.3.1

と、Vue.jsのバージョンないし他に依存するパッケージも上がっています。各種パッケージのバージョンに依存するパッケージの使用や実装を行っている場合は注意が必要です。

Nuxt.jsでできること

Nuxt.jsの公式サイトには下記のように書かれています

Vue ファイルで記述できること
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES6/ES7 のトランスパイレーション
JS と CSS のバンドル及びミニファイ
Head 要素の管理
開発モードにおけるホットリローディング
SASS, LESS, Stylus などのプリプロセッサのサポート
HTTP/2 push headers ready
モジュール構造で拡張できること

今まで上記をVue.jsのみで実装しようとすると、各プロジェクトでwebpack.config.js等を用い細かく設定が必要だったり、プラグインのバージョン管理・結合管理等、アプリケーションロジックとは関係の無いところで実装工数が発生していました。

Nuxt.jsにより提供される上記機能を使用することで、コーディングスタイルを統一した開発、よりアプリケーション実装に注力した開発ができるようになります。

Nuxt.jsの大きな強み

上記のできることによってどのような恩恵を受けられるのか紹介したいと思います。

SSRを手軽にVue.jsベースで実装できる

まずNuxt.jsそもそもの原点としてこれは重要な強みになります。上記引用でいうと

サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
Head 要素の管理

あたりがそれに当たります。

インストール後 nuxt start というコマンドを実行するだけでSSRができるという手軽さだけではなく、 htmlでいう<head>タグの管理がJS Objectベースで記述できる為、SEO等クローラーに優しい実装が出来ます。

また、非同期データに関しては、初回アクセス時はSSRによりサーバーサイドから取得するため、Vue.jsの標準的なライフサイクルよりも前にHeader等を評価する必要がありますが、それをNuxt.jsはasyncDataというページ単位での前処理を行うことでこの問題を解決しています。

また、Node.jsを使用せず、静的サイトとして出力したい場合でも、 nuxt generateというコマンドを用いることで、ルーティングが自動解決するページはもちろん、商品の詳細ページ等、動的なパラメータを渡すページでも設定によってhtmlファイルに変換してくれます。

アプリケーション実装に集中できる環境

Nuxt.js には、SSRだけでなく、コンポネント志向のフレームワークやVue.jsの開発を行っているといずれ直面するような問題に対して、予め機能を搭載しております。

上記引用でいうと

非同期データをハンドリングするパワフルなルーティング
ES6/ES7 のトランスパイレーション
開発モードにおけるホットリローディング
SASS, LESS, Stylus などのプリプロセッサのサポート

あたりがそれに当たります。ファイル名によるダイナミックなルーティング、ページ単位での非同期処理を考慮したデータ保持、ES6/7の最適な設定、実装がすぐに反映されるホットリローディング、プリプロセッサまわりの標準設定がインストールするだけで提供されている為、babelやwebpackの複雑な設定をすること無く、アプリケーションロジックに集中することが出来ます。

ルーティングにかんしては、規則どおりに実装することで、ルーティングファイルを設けることなく、ルーティングできるようになります。またミドルウェアの概念もあるため、例えば認証によるアクセス制限やマスターデータの事前取得等他ページにまたがる処理も簡単に実装できるようになります。

また、プラグイン・モジュールという概念があり、公式コミュニティーがOSSとして提供している便利機能だったり、グローバルコンポネントの定義、UIフレームワークとの連携を、.jsファイル単位で簡素に管理できるようになっています。

通信の最適化

開発環境だけでなく、ユーザ体験を向上させるための通信の最適化もNuxt.jsは提供しています。

上記引用でいうと

コードを自動的に分割すること
JS と CSS のバンドル及びミニファイ
HTTP/2 push headers ready

あたりがそれに当たります。

そもそも Nuxt.js 自体がこれだけの機能がありつつ 57kB min+gzip で実装されているため、ユーザへの負荷がかかりづらいフレームワークです。

さらに単一ファイルへの出力を行うことでユーザの初回アクセス時に過度なダウンロードをさせることを防げます。これは上記のルーティング規則と密接に結びついているからこそできることでしょう。加えて分割されたコンテンツそれぞれも極力小さくすることで、容量を削減します

HTTP/2 push header readyはまだ検証していませんが、etag, gzipに加え、HTTP/2で提供されているサーバープッシュのHeaderを自動的に使用することができるようになり、プロトコルレイヤーでの通信最適化ができます。

まとめ

これまでNuxt.jsにてできることを紹介してきました。現状Nuxt.jsがSSR前提での実装となっているのですが、1.0がリリースされたタイミングでSSR無しでも動作させるようになる予定なので、 Vue.jsでSSRしたい方はもちろん、管理画面等SSRが必要でない箇所でも上記メリットの享受のためNuxt.jsを導入されることを検討されてもいいのではないでしょうか。

Vue.jsで作られたフレームワーク「Nuxt.js」でできること

Contents