Nuxt.jsでSPAを作った時、動的ルーティングがNot Foundになる問題

事象

Nuxt.jsで作ったSPAをNetlifyでホスティングした時、動的ルーティング先がPage Not Foundなどと表示されてしまう。

些細な設定の問題なので、解決方法と考慮すべき点を書いておく。

解決方法

以下のように、nuxt.config.jsのgenerateにfallback: trueを設定する必要がある。

export default {
  mode: 'spa',
  target: 'server',
  generate: {
    fallback: true
  }
}

解説

fallback: trueを設定すると、distにファイルが存在しない、つまり動的なルーティングにアクセスした時、dist/404.htmlにアクセスするようになる。

dist/404.htmlは動的なルーティングを処理するため、正しくページが表示される。

公式の説明は以下。

フォールバックする HTML ファイルのパス。エラーページとして設定する必要があります。この設定により、不明なルートも Nuxt を介してレンダリングされます。 未設定またはファルシーな値が設定されている場合、フォールバック HTML ファイルの名前は 200.html になります。もし、true を設定すると、ファイル名は 404.html になります。値として文字列を指定すると、その文字列が代わりに使用されます。 公式

エラーハンドリングについて

とりあえずSPAの動的ルーティングはこれで動くようになるが、 本当に意図しない変なルーティングが来てコンテンツを読み込めない場合のハンドリングを別途実装する必要がある。

できるだけ動的ルーティングをビルド時に作る

fallback: trueでページが見えるとはいえ、chromeの開発者ツールを開くとしっかり404エラーが表示されている。

これはSEO的に悪影響な気がする・・・。

そのため、筆者は可能な限りSPAでも動的ルーティングをビルドするようにしている。

export default {
  mode: 'spa',
  target: 'server',
  generate: {
    async routes () {
      const articles = await fetch('articles') // APIでデータを取るとする
      return [
        ...articles.map(article => article.path),
      ]
    },
    fallback: true
  }
}

静的サイトを作る時など、動的ルーティングをgenerateのroutes()に書く作業は、公式チュートリアルなどでもよく見かける。

実はここで指定したルーティングは、SPAモードでも作られる。