Nuxt.jsのサーバーサイドレンダリングと静的ファイル生成を試す
ここでは、Vue.jsを補完するNuxt.jsの機能として、サーバーサイドレンダリングと、静的ファイル生成を紹介します。
サーバーサイドレンダリング
サーバーサイドレンダリングは、サーバーサイドでWebページの内容を生成する機能で、検索エンジン最適化（SEO）や表示の高速化に有用です。また、JavaScriptが無効な環境でも、最低限の内容を表示できるメリットがあります。
Nuxt.jsのプロジェクトでは、デフォルトでサーバーサイドレンダリングが有効になるため、JavaScriptを無効にしたWebブラウザーでもWebページを表示できます（ただし、動的な処理は機能しません）。例えば、図4のWebページをJavaScript無効のWebブラウザーで表示すると、初期表示は行えますが、テキストボックスの内容を変更しても画面に反映されません。
［補足］ChromeでJavaScriptの有効／無効を切り替える
ChromeでJavaScriptの有効／無効を切り替える設定は、設定画面の「詳細設定」-「サイトの設定」-「JavaScript」にあります。「chrome://settings/content/javascript」のURLを開いて、設定画面を直接表示することもできます。
図4のサンプルで、Webページのソースコードを参照すると、サーバーサイドレンダリングされた初期表示の内容がHTMLで記述されていることがわかります（図6の赤枠部）。
Nuxt.jsの設定ファイルnuxt.config.jsで、「mode」を「universal」から「spa」に変更すると、サーバーサイドレンダリングを無効にできます。
export default {
mode: 'spa', // 'universal'から変更
（略）
図4のサンプルでリスト6のmodeを変更後、「npm run dev」を実行して、JavaScript無効のWebブラウザーでWebページを開くと、真っ白なページが表示されます。ソースコードを参照すると、初期表示のHTML記述を含まないことがわかります。
なお、リスト6のmodeは、プロジェクト生成時に、表2のNo.7（レンダリングモード）で初期設定できます。デフォルト値の「Universal」を選択するとmodeがuniversalに、「Single Page App」を選択するとmodeがspaに、それぞれ設定されます。
静的ファイル生成
Nuxt.jsでは、プロジェクトから静的なファイルを生成できます。生成した静的ファイルは任意のWebサーバーにホストできます。Webサーバーにnode.jsやサーバーサイドアプリケーションの実行環境は必要ありません。
「npm run generate」コマンドを実行すると、図8の通り、プロジェクトのdistフォルダーに静的ファイルが生成されます。
ダウンロードできるサンプルに、図4のプロジェクト（p002-basic）から生成した静的ファイル（distフォルダー）を、Node.jsのWebサーバーでホストする例（p003-generated）を含めています。実行すると図4と同じ画面が表示されます。実行方法などの詳細は、サンプルコードのreadmeを参照してください。
まとめ
本記事では、UIフレームワーク「Vue.js」を利用してWebページを作成できるJavaScriptフレームワーク「Nuxt.js」について、フレームワークの概要、プロジェクトの生成／実行方法、基本的な実装方法を説明しました。また、サーバーサイドレンダリングや静的ファイルの生成といった、Nuxt.jsの特徴的な機能を紹介しました。
Nuxt.jsを使いこなすには、Vue.jsの基本について理解することが必要です。次回は、Vue.js（*.vueファイル）のバインディングやディレクティブの基本を説明していきます。
