nuxt generate時のためにページの初期表示では動的ルーティングを控えてクエリパラメータを用いるべき

今回はnuxt generate時のために備えてページの初期表示では動的ルーティングを控えてクエリパラメータを用いるべきというお話をしていきます。



nuxt generate時のためにページの初期表示では動的ルーティングを控えてクエリパラメータを用いるべき

Nuxt.jsの動的なルーティングのドキュメントを見てみましょう。
https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/guide/routing/

ここで、
「警告: generate コマンドで動的なルーティングは無視されます。: generate 設定 API」
という記載があります。

どういうことかというと例えば、
{Nuxt.jsのページのドメイン}/user/_userId
というページがあったとして、_userIdの部分を動的なルーティングと言いますが、SSR時には「{Nuxt.jsのページのドメイン}/user/12」というURLを叩くと正常に表示できますが、nuxt generateしたソースコードだと「{Nuxt.jsのページのドメイン}/user/12」のURLを叩いてもページが表示されないのです。

仕様などを調べていくと、nuxt generateした場合、それぞれのページごとにindex.htmlが生成されますが、動的なルーティングではHTMLファイルが生成されず、指定したページのURLを叩いても404エラーになってしまうのですね。

どうしても動的なルーティングを使ってnuxt generate時にもページを表示させたい場合はnuxt.config.jsにrouteを定義し、それぞれの動的ルーティングで取りうるURLに対してindex.htmlを生成するためAPIでリストを取ってくるという方法がありますが、セキュリティ的によろしくない他(ブラウザからそれぞれどんなindex.htmlが生成されたか見える)、無駄にHTMLファイルを生成してしまうことになります。

よって、ユーザーが初期表示でURLを叩いて表示させるページがあるときは、動的なルーティングを使用せずにクエリパラメータで変数を取得する処理を書いた方が良いでしょう。

終わりに

今回はnuxt generate時のために備えてページの初期表示では動的ルーティングを控えてクエリパラメータを用いるべきというお話をさせていただきました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Nuxt.js

Posted by ちこ