generateする時に動的ページを生成する方法と、generateの高速化方法について。動的ルーティングページはgenerate対象外Nuxt.jsではpageディレクトリ配下で、アンダースコアプレフィックスを付与したディレクトリまたはフォルダを作成することで、それが固定のパスではなく動的なルーティングとして定義することができます。動的なルーティングこういった動的ルーティングはNuxtからしたらどのようなパスがあるかわからないため、generate時に静的ページを生成してくれません。そのため、generate時に動的ルーティングで使われるパスを教えてあげる必要があります。することでそのパスに従ってNuxtが静的ページを生成してくれます。静的ページがないと何も対処しない場合リロードした際に404エラーとなります。動的ルートを指定する動的ルーティングパスの指定はnuxt.config.jsで定義します。generateプロパティのroutesオプションで動的ルートが定義された配列を生成して返しています。prisnicのAPI初期化用のため気にしないでください。APIのクエリを使用しているためわかりずらいかもしれませんが、やっていることは以下の通りです。prismicAPIで記事データ(配列)を全件取得する記事データ配列から1記事ずつ取り出す記事のuid(urlに使用)を使ってgenerate用パスを生成payloadに記事データをセットしているのは後述の高速化のためです。以上の処理でgenerate時に動的ルーティングぺージの静的ページを生成してくれます。entryパス以外にも動的ページを利用している場合は同様の処理を追加してあげるだけです。基本的には上記の処理の流れでOKなのですがあくまでも本ブログの実装なので、APIクエリ等はサイトの構成に合わせて変更が必要になります。slashの設定を有効としているため、上記のroute生成の箇所で末尾のスラッシュを忘れないように追加します。前述の通り、動的ルートの静的ページ生成のために、generate時にAPIを実行して記事データを取得しますが、通常はこのルーティングのためだけに使われるデータのため、uidを取得した後は破棄しています。そのため、動的ページで再び記事データをフェッチしないといけなくなります。これは単純に考えて、無駄なAPIコールでありgenerate時間も増えてしまいます。これを防ぐために、generate時のAPIで取得した記事データを動的ページのコンテキスト(payload)へ渡してあげるようにします。(上記nuxt.config.js参照)動的ページではpayloadを利用することで無駄なAPI実行がなくなり、APIコールの節約・時間短縮になります。}}おわりに今回の方法はページが少ないうちはあまり効果がないかもしれないですが、ページが増えるほど効果が顕著になってくるはずです。generate時に動的ルーティングページを生成する方法&payloadでgenerate高速化Kバックエンドエンジニア旅行とお酒、そしてプログラミングが大好きなエンジニアです。FW)・Cが専門ですが、Vue/Nuxtをはじめとするフロントエンドまわりも勉強中。旅行は国内・海外問わず、海外旅行は現在12か国、国内は地酒・温泉目的で色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)お酒はビール・ウイスキー・日本酒があればOK。最近はおもにVue/Nuxtを使用して個人プロダクトを色々開発したりしています。AdSenseAboutK旅行とお酒、そしてプログラミングが大好きなエンジニアです。FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)お酒はビール・ウイスキー・日本酒があればOK。