【Nuxt.js】generateで動的ルーティング生成とpayloadによる高速化

Nuxt.jsのgenerateコマンドで動的ルーティングページを生成する方法とpayload による動的ルーティング生成の高速化について紹介します。

また、cross-envを使ったAPIのURLを環境ごとに変える方法もあわせて紹介します。

参考:API: generate プロパティ

 

動的ルーティングの生成

動的なパラメータを用いたルートを生成する場合は、動的なルーティングの配列をroutesにセットします。

例として店舗詳細ページ(pages/shops/_id.vue)を動的に生成する場合は、以下のように店舗IDをパラメータとしてセットしていきます。

・nuxt.config.js

このような書き方だと、generateするタイミングに応じて店舗が増減すること考えられ、毎回generateするたびに手動で書いていくことになり非効率です。

そのため、APIから動的パラメータを取得するように実装します。

動的パラメータを取得するAPIから店舗IDを取得し、mapメソッドでパスを返していきます。

・nuxt.config.js

 

動的パラメータの店舗のIDが欲しいので、pluckメソッドでIDのみ配列化して取得します。

・app/controllers/api/shops_controller.rb(API側(Rails)のコントローラ)

 

payloadによる高速化

サーバーからshop.idを利用してルーティングを生成しますが、必要なデータ以外を破棄しています。その場合は/shops/_id.vueのデータを再度取得する必要があります。

payloadにページ生成に必要なデータを格納しておくことで、店舗詳細ページ遷移時に再度データを取得せずに済みます。

・nuxt.config.js

 

今回は、店舗のデータが欲しいのでpluckメソッドは使わずに取得します。

・app/controllers/api/shops_controller.rb(API側(Rails)のコントローラ)

 

以下のようにpages/shops/_id.vueからpayloadにアクセスすることできます。

・pages/shops/_id.vue

 

複数のAPIからデータをまとめてroutesにセットする場合

複数のAPIからデータを取得、まとめてroutesにセットする場合は、例として以下のように実装しました。

・app/controllers/api/shops_controller.rb

 

・app/controllers/api/companies_controller.rb

 

・app/controllers/api/members_controller.rb

 

・nuxt.config.js

 

payloadに格納するデータが複雑な場合

Railsの場合ですが、payloadのデータが::Shop.allみたいにシンプルに取得できない場合(データを整形する必要がある場合など)は、例として以下のようにしてJSONデータを返すことができます。

・app/controllers/api/shops_controller.rb

 

・app/views/api/shops/index.json.jbuilder

 

APIのURLを環境ごとに変えたい場合

現状だとAPIのURLが固定になっているため、環境ごとに変えたい場合はcross-envを使います。

詳しいインストール方法などは以下の記事に書いてあるので参考にしてください。

参考:Nuxtでcross-envを使い環境ごとに環境変数を分ける

 

以下のように環境ごとのAPIのURLを用意します。

・env.development.js

 

・env.staging.js

 

・env.production.js

 

package.jsonのscriptsに環境ごとのgenerateコマンドを追加します。

・package.json

 

次に叩いたgenerateコマンドから、process.env.NODE_ENVによって適用環境を取得します。

envSet.API_URLで適用された環境のAPIのURLを取得します。

・nuxt.config.js

 

存在しないページのハンドリング

静的ページとして生成してほしくない場合、fallbackをtrueにすることで、ファイルが存在しな場合は404.htmlとなります。

layoutsディレクトリ配下にerror.vueを作成することでエラーページ(200.html)が生成されますが、fallbackが未設定の場合はこのエラーページ(200.html)に飛ばされます。

・nuxt.config.js

 

以上、Nuxt.jsのgenerateコマンドで動的ルーティングページを生成する方法とpayload による動的ルーティング生成の高速化について紹介しました。