Nuxt.js を使って手軽にサーバーサイドレンダリングを試してみよう！ ｜ SiTest (サイテスト) ブログ

モダンな JavaScript フレームワークでは、サーバーサイドレンダリングをサポートしていることが多いですが、そのために別途モジュールをインストールしたり設定したりする必要があります。

「サーバーサイドレンダリングを試してみたい！でもなにか難しそうだから止めておこう」と思ったことはないですか？

なにか簡単にサーバーサイドレンダリングを試す方法はないだろうかと探していたところ、「Nuxt.js」に出会いました。
そこで今回は Nuxt.js を使って、手軽にサーバーサイドレンダリングを試してみたいと思います。

Nuxt.js は、 Vue.js をサーバーサイドレンダリングするアプリケーションを構築するのに便利なフレームワークです。
最初は React.js をサーバーサイドレンダリングするためのフレームワークとして Next.js が登場しましたが、 Nuxt.js はその Vue 版です。
Vue.js の公式にも紹介されているフレームワークです。

ではさっそく Nuxt.js でサーバーサイドレンダリングを試してみましょう！
公式にアクセスして、「はじめる」から順次進めていきます。
※日本語で翻訳されているので、英語に苦手意識がある人でも安心です。

すぐに試すために、 vue-cli で「スターターテンプレート」をインストールし、アプリケーションを立ち上げます。
インストール手順を順次進めればあっと言う間に構築することができます。

$ vue init nuxt/starter <project-name>（今回は nuxt_project と指定）
$ cd <project-name>
$ npm install
npm run dev

テンプレート上の package.json に記載の通り、 dev コマンドで nuxt コマンドを叩いています。

"scripts": {
    "dev": "nuxt",
    ・
    ・
    ・
}

Nuxt.js では、 nuxt コマンドを実行すると、localhost:3000 でサーバーを起動します。
またこのサーバーはホットリローディング（ファイルの変更があった際、自動的に再コンパイルする）するので、変更反映を意識する必要がありません。

さて、実際の画面とコードを確認する前に、初期画面に相当するコード（index.vue）の一部を確認しておきましょう。

<template>
  <section class="container">
    <div>
      <logo/>  // ※ logoコンポーネント
      <h1 class="title">
        nuxt_project
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a href="/hoge" target="_blank" class="button--green">Documentation</a>
        <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

logo タグが外部コンポーネントです。
サーバーサイドレンダリングされない環境下では、画面描画後のページを確認しても外部コンポーネントが HTML にレンダリングされませんが、どうなっているでしょうか。

localhost にアクセスして、ページのコードを確認してみましょう。

反転している箇所が logo コンポーネントに該当するコードです。きちんと HTML タグでレンダリングされているのが分かります。

ここまで読んでいただいた方はお気づきかと思いますが、サーバーサイドレンダリング用に何も特別な作業はしていません！
Nuxt.js 上のお作法に従ってページを作成すればサーバーサイドレンダリングを実現することができます。

今度は自分でコンポーネントやページを追加して、同様にサーバーサイドレンダリングができるか確認してみましょう！
公式にもある通り、 Nuxt.js では、ディレクトリの名前や役割が明確に決められています。
ページの追加は pages ディレクトリ、コンポーネントの定義は components ディレクトリに格納します。

pages ディレクトリに、 hoge.vue を、components ディレクトリに alert_button.vue と、message.vue ファイルを追加しました。
そして hoge.vue を以下のように修正します。

<template>
  <section class="container">
    <div>
      <logo/>
      <message/>  // messageタグの設置
      <alertButton/>  // alertButtonタグの設置
    </div>
  </section>
</template>

<script>
// コンポーネントのインポート
import Logo from '~/components/Logo.vue'
import message from '~/components/message.vue'
import alertButton from '~/components/alert_button.vue'

export default {
  // コンポーネントの登録
  components: {
    Logo,
    message,
    alertButton
  }
}
</script>

（中略）

作成したコンポーネントを使うための手順は以下のとおりです。
・ template タグ内で各コンポーネント用のタグを設置
・ script タグ内でコンポーネントのインポート
・ script タグ内でコンポーネントの登録

ページについては、 pages ディレクトリに追加するだけで、ルーティングの設定は不要です。（Nuxt.js 側でやってくれます。）

ここまでやったら実際の画面で確認してみましょう。

きちんと画面描画できています。
コードは上手くレンダリングできているでしょうか。

レンダリングの方も問題なくできています！

いかがでしたでしょうか？
やってみるまではなんとなく難しそうというイメージだったサーバーサイドレンダリングも、 Nuxt.js を使えば実質何もしなくても実現することができました。
さらに Nuxt.js ではルーティングについてもあまり意識することがないので、開発者側ではコンポーネントやページの作成に集中することができます。

とても簡単に使い始めることが出来るので、興味のある方は試してみてはいかがでしょうか。

※ SPA サイトと SEO との関係について気になる方はこちらの記事をどうぞ！
SPA サイトで SEO やアクセス解析するときに押さえておきたい8つのポイント