はじめに

2016年10月25日 zeit.co のチームが React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Next.js を発表しました。その発表から数時間後、Next.js と同じ方法で、Vue.js アプリケーションをサーバーサイドレンダリングするアイディアが生まれました。すなわち Nuxt.js が誕生したのです。

Nuxt.js とは何か?

Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。

サーバサイドとクライアントサイドの違いを抽象化することで無視して、一貫した方法で UIレンダリングすること に焦点を当てています。

私たちのゴールは、あるプロジェクトの基礎として利用したり、あるいは既に進行中の Node.js ベースのプロジェクトに追加できる、柔軟なフレームワークを作成することです。

Nuxt.js は サーバーサイドレンダリング する Vue.js アプリケーションの開発をもっと楽しくするために必要な設定を、あらかじめセットしています。

それに加えて nuxt generate と呼ばれる別の開発オプションも提供します。これは 静的に生成された Vue.js アプリケーションを構築するためのものです。私たちはこのオプションが、マイクロサービスでウェブアプリケーションを開発するための次の大きな一歩になり得ると信じています。

Nuxt.js はフレームワークとして、クライアントサイドとサーバーサイド間にまたがる開発を手助けする、たくさんの機能を備えています。例えば、非同期でのデータのやり取りや、Nuxt.js をミドルウェアとして利用することや、レイアウト機能などです。

どのように動作するか?

Vue with webpack and Babel

Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:

すべて合わせてもわずか 57kb min+gzip です(Vuex 利用時は 53kb)

また、ソースコードのバンドルや分割及びミニファイするために Webpack を使います。vue-loaderbabel-loader も合わせて使います。

主な機能

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

図解

下の図は、サーバーサイドで処理が実行されたときや、ユーザーが <nuxt-link> を通して遷移したときに、Nuxt.js によって何が呼び出されるかを表しています:

nuxt-schema

サーバーサイドレンダリング

Nuxt.js をプロジェクトの UI レンダリング全体を担うフレームワークとして使うことができます。

nuxt コマンドを実行すると開発サーバーが起動されます。このサーバーはホットリローディング及び vue-server-render を備えており、vue-server-render は自動的にアプリケーションをサーバーサイドレンダリングするよう設定されています。

シングルページアプリケーション(SPA)

もし何らかの理由でサーバーサイドレンダリングを使いたくない、あるいはアプリケーションを静的にホスティングする必要があるときは nuxt --spa を使って、シンプルに SPA モードを使うことができます。generate 機能と組み合わせて使うことで、Node.js ランタイムや特別なサーバー処理を利用する必要なしに、SPA のパワフルなデプロイを実現できます。

コマンドについてより深く理解するには コマンド を参照してください。

既にサーバーがあるならば Nuxt.js をミドルウェアとして追加することができます。ユニバーサルなウェブアプリケーションの開発に Nuxt.js を利用する際、制限は何一つありません。 Nuxt.js をプログラムで使う ガイドを参照してください。

静的ファイルの生成

nuxt generate コマンドにより Nuxt.js に大きなイノベーションがやってきました。

アプリケーションをビルドする際、ルートやストアにあるファイル全てに対し HTML を生成します。

例えば、以下のファイル構成だった場合:

-| pages/
----| about.vue
----| index.vue

次のファイルが生成されます:

-| dist/
----| about/
------| index.html
----| index.html

この方法により、生成されたウェブアプリケーションをどの静的ウェブサイトホスティングにもホストできます!

最も良い例はこのウェブサイト自体です。このサイトは生成され GitHub Pages でホストされています:

私たちは docs リポジトリ を更新するたびに毎回手動でアプリケーションを生成するのは面倒だったので、AWS Lambda function から生成機能を実行しています:

  1. nuxtjs.org リポジトリをクローンする
  2. npm install で依存関係のあるパッケージをインストールする
  3. nuxt generate を実行する
  4. gh-pages ブランチに dist フォルダをプッシュする

こうして私たちは サーバーレスで静的に生成されたウェブアプリケーション を手に入れたのでした。:)

さらに nuxt generate で生成、CDN でホストされた E コマースのウェブアプリケーションを考えてみましょう。このアプリケーションは商品が在庫切れもしくは再入荷されるたびに再生成されます。ユーザーがアプリケーションを遷移している間に、在庫の状態が(再生成のおかげで)最新になるのです。もはや、サーバーで複数のインスタンスやキャッシュを持つ必要はないのです!

GitHub Pages へデプロイする方法についての詳細は GitHub Pages へデプロイするには? を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する