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