本文書ではvue.jsのフレームワークNuxt.jsを使って開発を効率的に行いたいという人を対象にNuxt.jsのインストールから基本機能の動作確認の説明を行っています。

動作確認を行っているNuxt.jsのバージョンはv2.10.2です。

Nuxt.jsとは

Nuxt.jsはvue.jsのフレームワークです。フレームワークは開発を効率的に行うための機能が事前に準備されています。例えばNuxt.jsではルーティングのVue Routerやデータ管理のVuex、HTMLのメタタグ管理のvue-metaなどのプラグインを使用するための設定が行われているためすぐに利用することができます。

上記のプラグインの機能(ルーティング、データ管理、メタタグ管理)も含まれていますがNuxt.jsの説明によく使われる代表的な機能には次のようなものがあります。

  • Sever Side Rendering(サーバサイドレンダリング)
  • ディレクトリ構成
  • Code Splitting
  • SEOへの対策
本文書では実際に動作確認をしながらこれらの機能の理解を深めていきます。

Sever Side Rendering

また通常vue.jsはJavaScriptで記述されておりブラウザ側でJavacriptの処理が行われることでページが描写されます。もしHTMLしか理解できないクローラーからのアクセスがあった場合vue.jsで作成されたページには何も記述されていないと認識されてしまいます。Nuxt.jsではServer Side Rendering(サーバサイドレンダリング)という機能を利用してその問題を回避します。サーバーサイドレンダリングはブラウザを含むクライアント側で処理を行うものではなくサーバ側で処理を行います。

ディレクトリ構成

Nuxt.jsはベストプラクティスのディレクトリ構成が事前に準備されているのでその構成に従うことで効率よくコンポーネントやファイル管理を行うことができます。

Code Splitting

各ページに必要となるJavaScriptのみ自動でクライアント側に返す機能です。ページで使用しないコードを渡す必要がないのでパフォーマンスを上げることができます。

ルーティングの設定

ページ用のディレクトリのpagesにコンポーネントファイルを保存するだけでそのファイル名に対応するルーティングを自動で設定してくれます。ページを追加する度にVue Routerのrouter.jsファイルを更新する必要がありません。

SEOへの対策

プラグインのvue-metaが入っているため、SEOへの対策に必要なmetaタグの設定を行うことができます。

Nuxt.jsを使っているサイト

vue.js、nuxt.jsはさまざまなサイトで利用されています。Vue.jsを作ったEvan Youの最新の講演でルイヴィトンについて触れていました。

ルイビィトンでもNuxt.js
ルイビィトンでもNuxt.js

Nuxt.jsの基礎

Nuxt.jsのインストール

Nuxt.jsのインストールはnpx create-nuxt-appコマンドで行うことができます。プロジェクトの名前は任意なので好きな名前をつけてください。ここではnuxt-firstと進めます。


$ npx create-nuxt-app nuxt-first

インストールを実行するといくつか質問が行わられるのでその質問に答える形でインストールを進めていきます。

質問される内容も選択する項目も日々更新されています。本文書では2019年12月のcreate-nuxt-app v2.12.0で実行しています。

プロジェクト名の入力

プロジェクト名を聞かれますが、インストール時に入力したnuxt-firstがデフォルトの値として設定されるのでそのままEnterを押します。


create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in nuxt-first
? Project name nuxt-first

プロジェクトの説明

プロジェクトの説明を聞かれるのでプロジェクトの説明を入力してください。そのままEnterキーを押しても問題ありません。


? Project description This is a first nuxt.js project.

作者の名前

作者の名前を入れるので必要であれば入力を行ってください。何も入れなくても進むことができます。


? Author name () 

パッケージマネージャーの選択

yarnかnpmのパッケージマネジャーを選択します。使用するパッケージマネージャーを選択してください。本文書ではnpmを選択しています。


? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 

UIフレームワークの選択

使用するUI(ユーザインターフェイス)のフレームワークを選択します。Bootstrap, Bulma, Vuetify.jsなどを選択することができます。使用予定のUIフレームワークを選択してください。本文書では何も利用しないのでNoneを選択しています。


? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js

サーバフレームワークの選択

バックエンドに利用するサーバのフレームワークを選択することができます。使用しているフレームワークがある場合は選択してください。本文書では何も利用しないのでNoneを選択しています。


? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro

Next.jsで使用するモジュールの選択

使用するモジュールを選択することができます。これまでとは異なり、複数のモジュールが選択可能です。選択しなくても問題ありませんが、本文書ではAxiosのみ選択してインストールを進めます。


? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Lintツールの選択

Javscript, CSSの記述間違いやフォーマットの整形に利用できるLintを選択することができます。 モジュールと同様にすべて選択することも選択しないことも可能です。本文書では何も選択せずに進めます。


? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

テストフレームワークの選択

テストフレームワークを選択することができます。本文書では何も選択せずに進めます。


? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

レンダリング方法の選択

Universal(SSR)とSingle Page Appの2つからレンダリング方法を選択することが可能です。SSRはServer Side Rendering(サーバーサイドレンダリング)の略です。Universal(SSR)を選択するとサーバ側でレンダリングを行い、Single Page Appを選択するとブラウザ側でレンダリングを行います。今回はUniversl(SSR)を選択します。


? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App

developementツールの選択

Visual Studio Codeを利用している場合は、jsconfig.jsonを選択を行ってください。


? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)

以上でインストールするために必要な質問は終わります。ここからパッケージのインストールが始まります。

インストールが完了すると以下の画面が表示されます。



🎉  Successfully created project nuxt-first

  To get started:

	cd nuxt-first
	npm run dev

  To build & start for production:

	cd nuxt-first
	npm run build
	npm run start

nuxt-firstディレクトリに移動して、npm run devコマンドを実行します。


$ cd nuxt-first/
$ npm run dev
 ・
 ・
   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.10.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯
 ・
 ・

ブラウザでlocalhost:3000にアクセスすると下記の画面が表示されます。

Nuxt.jsのディレクトリ構成

インストールしたNuxt.jsがどのようなディレクトリ構成をしてどのようなファイルが保存されているのかを確認していきましょう。

プロジェクトディレクトリのnuxt_firstをVisual Code Editorで開きます。

Nuxtディレクトリ構成
Nuxtディレクトリ構成

.nuxtとnode_modeluesディレクトリを除き、デフォルトで実行されるファイルが入っているディレクトリはlayouts, components, pagesとstaticのみです。そのほかのディレクトリはmdファイルのみ入っています。mdファイルには各ディレクトリの使用に関する簡単な説明が記載されています。

日本語訳を加えていますが例えばassetsのREADME.mdファイルには以下が記述されています。


# ASSETS

**This directory is not required, you can delete it if you don't want to use it.**
//このディレクトリは必須ではないので必要でないから削除することができる。

This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
//このディレクトリはLESS, SASS, JavaSCriptのコンパイルの行われていないアセットを保存します。

More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
//このディレクトリの使用方法についての詳細はリンクのドキュメントを確認してください。

デフォルトページは、layoutsのdefault.vue、pagesのindex.vue、componentsのlogo.vueファイルで構成されています。各ディレクトリには役割がありその中にファイルを保存することでアプリケーションを構築していきます。

デフォルトページとvueファイルの関係
デフォルトページとvueファイルの関係

layoutsディレクトリのファイルには各ページに共通となるナビゲーションバーやサイドバーなどを記述します。pagesはページ(URL)毎に異なる内容を記述するファイルを保存します。componentsディレクトリは再利用可能なコンポーネントファイルを保存します。

上記の3つ以外のディレクトリにはどのようなファイルを保存していくのか説明しておきます。

  • assets・・・コンパイルが行われていないSASS, LESSやFontなどを保存
  • middleware・・・layoutやページがレンダリングする前に実行されるカスタム関数を保存。ユーザ認証などに使うことができます。
  • plugins・・・Vueインスタンスが起動する前にロードするJavaScriptプラグインを保存
  • static・・・robots.text, favicon、画像ファイルを保存。もしimage.pngを保存すると/image.pngでアクセスすることが可能。
  • store・・・Vuex Storeに関するファイルを保存
  • .nuxt・・・コンパイルを実行すると作成される。
  • node_modelues・・・next.jsで使われるJavaScriptのパッケージが保存。

Nuxt.jsの動作確認

ここからは実際にファイルを追加/更新することでnuxt.jsの使い方を確認していきます。

ここからはnpm run devコマンドを実行した状態でファイルの追加/更新を行ってください。

pagesへのファイルの追加

新しいページを作成するためにpagesディレクトリの中にabout.vueファイルを作成します。


<template>
    <h1>About Page</h1>
</template>

ブラウザでlocalhost:3000/aboutにアクセスすると下記のページが作成されます。ルーティングを手動で追加する必要はありません。about.vueファイルを作成するとその名前に対応するURLに対して自動でルーティングが設定されます。

追加したaboutについてのルーティング情報は、.nuxtディレクトリのrouter.jsの中で確認することができます。


// 中略
export const routerOptions = {
  mode: 'history',
  base: decodeURI('/'),
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/about",
    component: _15bd78f0,
    name: "about"
  }, {
    path: "/",
    component: _357553b5,
    name: "index"
  }],

  fallback: false
}

// 中略
vue-cliコマンドでプロジェクトを作成した場合は、コンポーネントを作成後にrouter.jsファイルにルーティングを手動で追加する必要があります。
about.vueをpagesに作成後ブラウザでアクセス
about.vueをpagesに作成後ブラウザでアクセス

layoutsのdefault.vueファイルの確認

layoutsディレクトリのdefault.vueファイルを中身を確認します。templateタグにはdivタグの中にnuxtタグが入っているだけです。このnuxtタグの部分にpagesの中のコンポーネントの情報が組み込まれます。その証拠にnuxtタグを削除するとブラウザには何も表示されます。


<template>
  <div>
    <nuxt />
  </div>
</template>
nuxtタグがVue routerのrouter-viewと考えてください。

default.vueファイルにはnuxtタグ以外にもコンポーネントやhtmlタグを追加することができます。htmlタグを入力してどのような変化があるか確認してみましょう。


<template>
  <div>
    <nav>ここにナビゲーションバーを入れる</nav>
    <nuxt />
  </div>
</template>

“/”、”/about”のどちらのページアクセスしても上部に追加したテキストが表示されるのが確認できます。layoutsのファイルはpageコンポーネントの外側に存在しすべてのページで共通なコンポーネントとして存在することがわかります。

layoutsのdefalut.vueにテキストを追加
layoutsのdefalut.vueにテキストを追加

NavBarコンポーネントの作成

NavBarコンポーネントを作成し、各ページへのリンクを作成します。NavBarコンポーネントはcomponetsディレクトリの下に作成します。リンクにはnuxt-linkタグを使います。vue-routerのrouter-linkに対応します。


<template>
  <div>
    <nav>
    <nuxt-link to="/">Home</nuxt-link>
    <nuxt-link to="/about">About</nuxt-link>
    </nav>
  </div>
</template>

layoutsのdefault.vueに作成したNavBar.vueをimportします。


<template>
  <div>
    <NavBar />
    <nuxt />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
export default {
  components:{
    NavBar,
  }
}
</script>

各ページの上部にHomeとAboutへのリンクが表示されます。

NavBarを追加
NavBarを追加

SSRの確認

nuxt.jsの特徴の1つであるSever Side Rendering(SSR)ですが、インストール時にUniversalを設定しているので自動で有効化されています。SSRを使用しないSingle Page Application(SPA)の場合とどのような違いがあるのか確認していきます。

SSRとSPAの設定変更

インストール後もnux.config.jsファイルのmodeパラメータを変更するとSSRとSPAの切り替えを行うことができます。パラメータの値はuniversalとspaの2つです。


export default {
  mode: 'universal', //spa

universalはSSRを使用、spaはSSRを使用しません。

SSRの動作確認

SSRが実際に動作しているかどうかはdivタグにdata-server-rendered=”true”が設定されているかで確認できます。

ブラウザからアクセスするURLは/aboutでファイルは下記のAbout.vueファイルを利用します。


<template>
  <div>
    <h1>Aboutページ</h1>
    <h2>{{ subtitle }}</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {
      subtitle: 'この文書はNuxt.jsの基本的な使用方法について説明しています。'
    }
  },
}
</script>

SSR設定(universal)の場合はbodyタグの中にdata-server-rendered=”true”を見つけることができます。


<div data-server-rendered="true" id="__nuxt">

SSR設定なし(spa)の場合は、data-server-renderedタグを見つけることはできません。


<div id="__nuxt">

また、SSRの設定の場合はブラウザ上からページのソースを見ると通常のHTML文を確認することができます。


<div data-server-rendered="true" id="__nuxt">
  <div id="__layout">
    <div>
      <div>
        <nav>
        <a href="/" class="nuxt-link-active">Home</a> 
        <a href="/about" class="nuxt-link-exact-active nuxt-link-active">About</a>
        </nav>
      </div>
    <div>
    <h1>Aboutページ</h1> 
    <h2>この文書はNuxt.jsの基本的な使用方法について説明しています。</h2>
  </div>
</div>

SSR設定なしの場合は、上記のようなタグはページのソースを確認しても見つけることができません。このことからもSSRではサーバ側で処理が行われてページ情報が送信されていることがわかります。

curlコマンドを利用してSSR設定ありとSSR設定なしで違いがわかるので実行してみてください。curl http://localhost:3000/aboutで実行可能です。

Code Splittingの確認

nuxt.jsの機能の1つでもあるCode Splittingの動作確認を行います。

これまではコンパイルする際にnpm rum devで実行していましたが、今回はnpm run buildを実行します。


 $ npm run build

実行すると各ページに対応するJavaScriptファイルが作成されることがわかります。


Hash: 05e6076e1a50a9aa5a87
Version: webpack 4.41.2
Time: 2042ms
Built at: 2019-12-17 11:04:21
                  Asset       Size  Chunks                         Chunk Names
2814fe35faaaea370267.js  535 bytes       5  [emitted] [immutable]  pages/users/_id
29f5954878d4b3ae7aed.js  327 bytes       2  [emitted] [immutable]  pages/_category/index
58af663e6a323ef3e634.js   3.13 KiB       4  [emitted] [immutable]  pages/index
5a43840719e5e546f15b.js  348 bytes       1  [emitted] [immutable]  pages/_category/_article
5b0826655db24e4715d9.js  447 bytes       3  [emitted] [immutable]  pages/about
b128386ad9c15e74cdcd.js  272 bytes       6  [emitted] [immutable]  pages/users/list
              server.js   28.1 KiB       0  [emitted]              app
   server.manifest.json  435 bytes          [emitted]              
Entrypoint app = server.js

Code Splittingでページ毎に分けられたJavaSciptファイルはそのページに対応するJavaScriptファイルのみブラウザに送信されてくるのかを確認してみましょう。

v2.4.0からはviewportに<nuxt-link>タグが入っている場合は、自動でprefetchされます。そのためルートにアクセスすると<nuxt-link>タグでリンクされているAboutページのJavaSciptファイルも一緒に取得されます。prefetchされないように設定することが可能です。nuxt-linkタグにno-prefetchを設定します。


<nuxt-link to="/about" no-prefetch>About</nuxt-link>

no-prefetchを設定したら、npm run buildとnpm run startを実行します。

JavaScriptファイルの受信についてはブラウザの開発ツールのネットワークを利用します。

まずトップページへのアクセスを行います。開発ツールのNetworkを見ると6つのファイルが送られてきていることが確認できます。一番最後はfavicon.icoです。

トップページをアクセスした時に送られてくるデータ
トップページをアクセスした時に送られてくるデータ

次にトップページにあるリンクからaboutページへアクセスします。アクセスした瞬間にfavicon.icoの下に1つ増えていることが確認できます。

トップからaboutページに移動
トップからaboutページに移動

中身を確認するとAboutページに関するJavaScriptファイルであることがわかります。

送られてきたファイルの中身
送られてきたファイルの中身

これらの結果からCode Splittingでページ毎に分割されたJavaScriptファイルはアクセスするページ毎にそのページに対応するJavaScriptファイルを送信することがわかりました。

ルーティングの設定

nuxt.jsの特徴の1つでもあるルーティングの自動設定。実際にページを作成しながらどのような動作になるのか確認していきます。

階層ページを作成

Aboutページではpagesディレクトリの直下にAbout.vueファイルを作成してブラウザからはURL:/aboutでアクセスしてページを表示しました。次はURLが/users/listという階層のある場合のルーティング方法について確認します。

pagesディレクトリの中にusersディレクトリを作成し、その下にlist.vueファイルを作成します。


<template>
    <h1>ユーザ一覧</h1>
</template>

nuxt.jsが自動でルーティングを作成してくれるので、ファイル作成後ブラウザで/users/listにアクセスするとlist.vueにtemplateタグに記述した内容が表示されます。このようにnuxt.jsを利用すると階層的なルーティングも自動で行ってくれます。

usersの下にlist.vueファイルを作成
usersの下にlist.vueファイルを作成

.nuxtディレクトリのrouter.jsファイルを確認すると追加したuserのlist情報が追加されています。


routes: [{
  path: "/about",
  component: _15bd78f0,
  name: "about"
}, {
  path: "/users/list",
  component: _06ba341c,
  name: "users-list"
}, {

routes.jsファイルに記述されているルーティングの名前users-listを使ってNavBar.vueにリンクを追加します。router-linkタグと同様にnuxt-linkでもnameを使ってリンクを設定することが可能です。


<template>
  <div>
    <nav>
    <nuxt-link to="/">Home</nuxt-link>
    <nuxt-link to="/about">About</nuxt-link>
    <nuxt-link :to="{ name: 'users-list' }">User List</nuxt-link>
    </nav>
  </div>
</template>

Dynamic Routes(動的ルート)の設定

listではユーザの一覧を表示させるページでしたが、/users/1、/users/2のようにid(パラメータ)を受け取ってユーザ毎のページを作成したい場合はどのように行えばいいのでしょう。

_id.vueをusersディレクトリの下に作成することで実現することができます。

ファイル名は必ず_id.vueである必要はなくusernameをパラメータとして受け取る場合は_username.vueと任意の名前をつけることができます。ファイル名の前には必ず_(アンダーバー)が必要です。

/users/1, /users/2のようにURLに入力したIDは、this.$route.params.idで取得することが可能です。_id.vueファイルでIDを取得し、ブラウザに表示させます。


<template>
    <h1>ユーザID: {{ this.$route.params.id }}</h1>
</template>

/users/38でアクセスするとブラウザ上にはthis.$route.params.idで取得したIDが表示されます。

dynamic routesによるIDの取得
dynamic routesによるIDの取得

通常はaxios等でサーバから取得したデータを使ってusersの一覧を取得しますが今回はusersデータを予め用意してアクセスしてきたIDを使って表示するユーザ情報を変えます。


<template>
    <h1>ユーザID: {{ user.name }}</h1>
</template>

<script>
export default {
    data(){
        return {
            id: this.$route.params.id,
            users: [
                { 
                    id: 1, name: 'John Doe'
                },
                {
                    id: 2, name: 'Kevin Smith',
                },
                {
                    id: 3, name: 'Harry Bosch'
                },
            ],
        }
    },
    computed:{
        user(){
            return this.users.find(user => user.id == this.id);
        } 
    }
}
</script>

/users/2でアクセスするとusersの中でidを2を持つユーザ名が表示されます。

dataプロパティとcomputedプロパティを利用
dataプロパティとcomputedプロパティを利用

複数のパラメータを受け取りたい場合

例えばホームページの階層のように/{カテゴリー名}/{記事名}のようにURLから2つのパラメータ(カテゴリー名、記事名)を受け取りたい場合の方法を確認します。

pagesディレクトリに_categoryディレクトリ、その中に_article.vueファイルを作成します。

作成後、/vue/start_nuxt_jsというURLにアクセスするとvueはthis.$route.params.category, start_nuxt_jsはthis.$route.parames.articleで取得することができます。

/vue/にアクセスしてカテゴリーvueの記事一覧のみ取得したい場合は_categoryディレクトリの下にindex.vueファイルを作成することでthis.$route.parames.categoryからvueを取得可能です。


<template>
  <h1>カテゴリー:{{ this.$route.params.category }}</h1>
</template>

<template>
  <h1>{{ this.$route.params.category }}/{{ this.$route.params.article }}</h1>
</template>

SEO対策

nuxt.jsではvue-metaライブラリを利用しています。metaタグにはさまざまなものがありますが、ここではtitleとdescriptionタグに注目して設定方法を確認していきます。

デフォルトの設定は、nuxt.config.jsファイルに記述されています。


  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

headメソッドによるtitleタグの追加

作成したAboutページのタイトルを見るとデフォルトのnuxt-firstが設定されています。タイトルはブラウザのタブで確認することができます。

デフォルトのタイトル
デフォルトのタイトル

About.vueファイルのscriptタグの中にheadプロパティを追加して、titleをAbout Pageに設定します。


<template>
    <h1>About Page</h1>
</template>

<script>
export default {
    head(){
        return {
            title: 'About Page',
        }
    }
}
</script>

ブラウザで確認するとタブがAbout Pageになっていることが確認できます。

titleタグ、metaタグはブラウザからページのソースや開発ツールのElements(要素)を見ることで確認することができます。
titleタグがAbout Pageに
titleタグがAbout Pageに

dynamic routesのページにおけるタグの追加

ルーティングで設定したuserの個別ページにtitleタグをつける方法を確認します。computedプロパティを利用することで動的にtitleを変更することが可能です。


export default {
  head(){
    return{
      title: this.user.name,
    }
  },
  data(){
    return {
      id: this.$route.params.id,
      users: [
        { 
            id: 1, name: 'John Doe'
        },
 //中略
      ],
    }
  },
  computed:{
    user(){
      return this.users.find(user => user.id == this.id);
    } 
  }
}

metaタグのdescriptionの設定方法

metaタグのdescriptionに記述した内容はtitleと同様にSEOでは非常に重要はタグです。descriptionにはページの要約を記述します。

titleと同様にheadプロパティの中に記述します。


<script>
export default {
  head(){
    return {
      title: 'Aboutページ',
      meta:[
        { hid: 'description', name: 'description', content: 'これはAboutページです。'}
      ]
    }
  }
}
</script>

descriptionはブラウザ上には表示されないので、ページのソースを見ることで確認することができます。

ソースからdescriptionを書くにする

Single Page Applicationモードの場合のタグ

nuxt.config.jsファイルのmodeパラメータをuniversalからspaに変更するとタグがどのように変化するのか確認してみましょう。


export default {
  mode: 'spa', // or universal

ページのソースコードを見るとデフォルトのThis is a first nuxt.js project”が表示されます。しかし、開発ツールのElementでタグを確認すると”これはAboutページです。”になっています。

理由はSever Side Renderingではmetaタグが設定された状態でクライアント側にページデータが送信されますが、Single Page Applicationの場合はページデータが送られた後にJavaScriptによってmetaタグが更新されるためです。ここからもSever Side Renderingではサーバ側で処理が行われることを示しています。

ここまでの内容で最初に上げたnuxt.jsの機能であるSever Side Rendersing, ディレクトリ構成、Code Splitting, SEOの対策, ルーティングの設定について説明を行うことができました。次は下記の文書でaxiosの使い方を確認しておきましょう。