この記事では
この記事では、サーバーサイドレンダリングの仕組みを説明しています。
また、動的なルーティングの追加方法についても触れています。
まず結論をいうと、
結論を先に言うと、Nuxt.jsではルーティングの設定に沿ってサーバーサイドレンダリングを実行します。
まずはそのルーティングから理解していきましょう。
ルーティングとは？
ルーティングとは、「このURLはこのファイルを表示してね」と指定しているプロパティのことです。
もう少し詳しく説明すると、
- URL
- 表示するファイルの名前
- ルートの名前
がひとまとめになった情報のことです。
Nuxt.jsのrouter.js
ルーティングが作られるとき
え？上の画像のようなコード書いた覚えないよ。疑問に思われたかも知れません。
それもそのはず。
Nuxt.jsでは、pagesディレクトリの下に作成されたVueファイルに対して、自動的にルーティングを生成しています。
便利ですね。
わざわざ書かなくても、ファイル名やディレクトリ名から勝手にルーティングを作ってくれます。
サーバーサイドレンダリングとは？
サーバーサイドレンダリングとは、サーバー側でHTMLファイルを生成することです。
Nuxt.jsでは、generateコマンドが実行されると、上画像のルーティンを読み込んで本番環境のサーバーにHTMLファイルを出力します。
サーバーにHTMLファイルがあると、何が嬉しいかって？
クローラーが循環するときに、このHTMLファイルを読み込んでくれます。
また、SNSで記事共有するときにメタ情報を読み込んで、アイキャッチ画像や記事のタイトル欄を自動生成してくれます。
つまり、SEO対策ができるのです。ブログサイトには必須ですね。
一つ問題が。。。
ただ、一つだけ問題があります。
HTMLファイルを出力するとき、Nuxt.jsは 動的なルーティングを無視するのです！
動的なルーティングとは？
デモサイトのカテゴリーページは、
カテゴリーページ
ファイルは同じでも、「URLが変化することで、カテゴリー名や関連づく記事の表示が変わる」このようなページのルーティングのことを、動的なルーティング と言います。
無視された動的なルーティングの末路
無視された動的なルーティングはどうなるのでしょうか。
そのURLにいきなり飛ぶと「404 Not Find」エラーを吐き出します。
サーバーにHTMLファイルがないので、「ぺージが無いよ！」と怒られるのです。
無視されるなら自分で設定するんだ
対応策はあるのでしょうか？
はい、ご安心を。
以下の手順で動的ルーティングを追加することができます。
nuxt.config.js ファイルにgenerateプロパティを追加します。- そして、routesプロパティに 動的なルーティングのPathを、配列で渡してやるのです。
Pathの配列を渡すサンプルコード
export default {
generate: {
routes: [
'/users/1',
'/users/2',
'/users/3'
]
}
}
参考
ただ、一つ一つ手書きで追加するのは現実的ではありません。
実務的には、APIを取得するメソッドを仕込んでPathを追加していきます。
Contentfulの動的ルーティングをgenerateプロパティに追加する場合
ルーティングのHTMLファイルを生成する
ルーティングのHTMLファイルの生成は、下のコマンドを実行します。
$ yarn generate
実行すると、distディレクトリにHTMLファイルを吐き出します。
ターミナルには、HTMLファイルを生成したページのPathが表示されます。
動的なルーティングも生成されていますね。（赤い部分）
本番環境のセッティング
このサイトでは、デプロイ先にNetlifyというホスティングサービスを利用しています。
Netlifyの設定では、デプロイ時のコマンドと、サーバー側で見るディレクトリ名を下記のように設定します。
- デプロイ時のコマンド = yarn build && yarn generate
- サーバー側で見るディレクトリ = dist
これにより、サーバーサイドレンダリングを実行し、生成されたHTMLファイルをサーバーが参照できるようになります。
Netlifyの設定ページ
まとめ
- サーバーサイドレンダリング = サーバー側で、静的ファイル（HTMLファイル等）を生成すること
- レンダリングが無視される動的なルーティングは、generateプロパティに追加することで解決する
- yarn generateコマンドはHTMLファイルを生成するためのコマンド
これがNuxt.jsのサーバーサイドレンダリングの正体です。
おしまい。