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

2021年10月30日

今回は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を叩いて表示させるページがあるときは、動的なルーティングを使用せずにクエリパラメータで変数を取得する処理を書いた方が良いでしょう。