コラム 3. プログラミング情報
2019年10月16日に公開

【Nuxt.js】サーバーサイドレタリングの仕組みと、動的なルーティングの追加

この記事では

この記事では、サーバーサイドレタリングの仕組みを説明しています。

また、動的なルーティングの追加方法についても触れています。

まず結論をいうと、

結論を先に言うと、Nuxt.jsではルーティングの設定に沿ってサーバーサイドレタリングを実行します。

まずはそのルーティングから理解していきましょう。

ルーティングとは?

ルーティングとは、「このURLはこのファイルを表示してね」と指定しているプロパティのことです。

もう少し詳しく説明すると、

  • URL
  • 表示するファイルの名前
  • ルートの名前

がひとまとめになった情報のことです。

Nuxt.jsのrouter.js

2019-10-16 13-43-06

ルーティングが作られるとき

え?上の画像のようなコード書いた覚えないよ。疑問に思われたかも知れません。

それもそのはず。

Nuxt.jsでは、pagesディレクトリの下に作成されたVueファイルに対して、自動的にルーティングを生成しています。

便利ですね。

わざわざ書かなくても、ファイル名やディレクトリ名から勝手にルーティングを作ってくれます。

サーバーサイドレタリングとは?

サーバーサイドレタリングとは、サーバー側でHTMLファイルを生成することです。

Nuxt.jsでは、generateコマンドが実行されると、上画像のルーティンを読み込んで本番環境のサーバーにHTMLファイルを出力します。

サーバーにHTMLファイルがあると、何が嬉しいかって?

クローラーが循環するときに、このHTMLファイルを読み込んでくれます。

また、SNSで記事共有するときにメタ情報を読み込んで、アイキャッチ画像や記事のタイトル欄を自動生成してくれます。

つまり、SEO対策ができるのです。ブログサイトには必須ですね。

一つ問題が。。。

ただ、一つだけ問題があります。

HTMLファイルを出力するとき、Nuxt.jsは 動的なルーティングを無視するのです!

動的なルーティングとは?

デモサイトのカテゴリーページは、_slug.vueという一つのファイルで、全てのカテゴリーを表示しています。

カテゴリーページ

2019-10-13 15-56-55

ファイルは同じでも、「URLが変化することで、カテゴリー名や関連づく記事の表示が変わる」このようなページのルーティングのことを、動的なルーティング と言います。

無視された動的なルーティングの末路

無視された動的なルーティングはどうなるのでしょうか。

そのURLにいきなり飛ぶと「404 Not Find」エラーを吐き出します。

サーバーにHTMLファイルがないので、「ぺージが無いよ!」と怒られるのです。

無視されるなら自分で設定するんだ

対応策はあるのでしょうか?

はい、ご安心を。

以下の手順で動的ルーティングを追加することができます。

  1. nuxt.config.jsファイルにgenerateプロパティを追加します。
  2. そして、routesプロパティに 動的なルーティングのPathを、配列で渡してやるのです。
Pathの配列を渡すサンプルコード
export default {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

参考

generateプロパティ - Nuxt.js

ただ、一つ一つ手書きで追加するのは現実的ではありません。

実務的には、APIを取得するメソッドを仕込んでPathを追加していきます。

Contentfulの動的ルーティングをgenerateプロパティに追加する場合

2019-10-11 14-16-51

ルーティングのHTMLファイルを生成する

ルーティングのHTMLファイルの生成は、下のコマンドを実行します。

$ yarn generate

実行すると、distディレクトリにHTMLファイルを吐き出します。

ターミナルには、HTMLファイルを生成したページのPathが表示されます。

動的なルーティングも生成されていますね。(赤い部分)

2019-10-06 10-56-47

本番環境のセッティング

このサイトでは、デプロイ先にNetlifyというホスティングサービスを利用しています。

Netlifyの設定では、デプロイ時のコマンドと、サーバー側で見るディレクトリ名を下記のように設定します。

  • デプロイ時のコマンド = yarn build && yarn generate
  • サーバー側で見るディレクトリ = dist

これにより、サーバーサイドレタリングを実行し、生成されたHTMLファイルをサーバーが参照できるようになります。

Netlifyの設定ページ

2019-08-11 16-10-06

まとめ

  • サーバーサイドレタリング = サーバー側で、静的ファイル(HTMLファイル等)を生成すること
  • レタリングが無視される動的なルーティングは、generateプロパティに追加することで解決する
  • yarn generateコマンドはHTMLファイルを生成するためのコマンド

これがNuxt.jsのサーバーサイドレタリングの正体です。

おしまい。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
スポンサー広告