Nuxt.jsのSPAモードで作ったアプリケーションをFirebase Hostingにデプロイしたとき、パスパラメータのあるページでリロードをすると404になってしまう問題に遭遇したので、その回避方法を紹介します。

※ 前提
この記事のサンプルコードでは TypeScript + Composition API を使用しています。

原因

Nuxtでパスパラメータを表現したいときは、以下のようにディレクトリを切ることで動的ルーティングが実現できますよね。

pages
├── users
│ └── _id.vue
└── index.vue

このように定義することで/users/{id}というページが動的に生成されるようになります。
しかしSPAモードでbuildした場合、こういった動的ルーティングをしているページは静的ページとして生成されないため、リロードすると404になってしまうのです。

回避方法

Firebase Hostingのカスタム404ページを使用し、404ページからもとのパスへリダイレクトさせることでリロードを実現することができます。

カスタム404ページを用意する

pages配下に404ディレクトリを作成し、index.vueを作成します。

pages
├── 404
│ └── index.vue // 追加
├── users
│ └── _id.vue
└── index.vue

ビルド時、ルートディレクトリに404.htmlが生成されるようnuxt.config.jsにgenerateプロパティを追加します。

nuxt.config.js

export default {
    generate: {
        routes: ['404']
    }   
}

/404/index.vueで現在のパスをクエリパラメータにセットし、リダイレクト用ページへリダイレクトさせます。

index.vue

<script lang="ts">
import { defineComponent, onMounted, SetupContext } from '@vue/composition-api'

export default defineComponent({
  setup(_props, context: SetupContext) {
    onMounted(() => {
      const pathName: string = window.location.pathname
      context.root.$nuxt.$router.push('/redirect?path=' + encodeURI(pathName))
    })
  }
})
</script>

リダレクトページを用意する

pages配下にredirect.vueを作成します。

pages
├── 404
│ └── index.vue
├── users
│ └── _id.vue
├── redirect.vue // 追加
└── index.vue

クエリパラメータのパスを取得し、もとのページへリダイレクトさせます。
こうすることで動的にページ遷移をする要領でパスパラメータありきのページが表示できるようになり、404エラーを回避することできます。

redirect.vue

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  layout: 'empty',
  asyncData({ base, redirect, query }) {
    const param: string | (string | null)[] = query.path
    if (param === undefined || typeof param !== 'string') {
      return redirect('/')
    }
    const redirectPath: string = '/' + param.replace(base, '')
    return redirect(redirectPath)
  }
})
</script>

これでNuxtのSPAモードでパスパラメータを使用していても、リロードができるようになりました！
同じ問題で困っている方のヒントになれば幸いです。

原因

回避方法

カスタム404ページを用意する

リダレクトページを用意する

参考