はじめに

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 はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:

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

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

主な機能

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

図解

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

nuxt-schema

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

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

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

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

既にサーバーがあるならば Nuxt.js をミドルウェアとして追加ことができます。ユニバーサルなウェブアプリケーションを開発するために Nuxt.js を利用するにあたって何も制限はありません。Nuxt.js ガイドを見てみてください。

静的ファイルの生成

Nuxt.js による大きなイノベーションがやってきました。それが nuxt generate です。

nuxt generate はアプリケーションをビルドする際に、各ルートごとの 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. dist フォルダーを gh-pages ブランチにプッシュする

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

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

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