背景
Nuxtを利用している際の壁の１つとして「動的ページのNot Found問題」をどのように回避するかというものがあります。 その対処方法はネットにも多く情報が存在しておりそこまで難しくもないのですが、 今回はその動的ページが随時追加されるケースのNot Foundへの対処法について記載したいと思います。 具体的にはサイト上で画像や動画といったコンテンツを登録した際に、 それに対応したページを表示したいといったケースになります。
動的ページのNot Found問題について
まず本題に入る前にその一個手前の問題である「動的ページのNot Found問題」について説明します。
エラーの概要
動的ページとは以下のようなページ構成を差しており、 ブログや記事・ユーザー情報といった多岐に渡って利用されるページ構成だと思われます。 （本ブログもこの構成になっています）
/blogs/blog_1/blogs/blog_2/blogs/blog_3/blogs/blog_...
これをNuxt上で実現する際にはpages配下に以下の構成で型となるファイルを作れば良いのですが、 そのままデプロイを行うと記事の表示ができずNot Foundとなってしまいます。
/pages/blogs/_blogId.vue
これが「動的ページのNot Found問題」です。
エラーの原因・回避方法
エラーの原因はエラー内容通り記事ページが作成されず見つかっていないことが原因です。 Nuxtをデプロイする際には以下generateコマンドを実行すると思うのですが、 デフォルトだと動的ページは無視してページが作成されてしまいます。
npm run generate
そのためgenerate時に明示的に記事作成を行うように、 nuxt.config.jsに以下のようなコードでルートを追加する必要があります。
generate: {
...
routes(callback) {
...
content
.$content('markdown/blog', { deep: true })
.fetch()
.then((response) => {
<em>for</em> (<em>const</em> key <em>in</em> response) {
routes.push({
route: '/blogs/' + response[key].url,
})
}
// console.log(routes)
callback(<em>null</em>, routes)
})
.catch(callback)
},
},
コードの簡単な説明
content.$content('markdown/blog', { deep: true }).fetch()箇所でmarkdown/blogフォルダ配下の全ファイルを取ってくるfor (const key in response)箇所で１ファイルごとに処理を実行routes.push({ route: '/blogs/' + response[key].url, })箇所でルートを追加
（コンテンツ内容によって適宜修正が必要です）
動的ページの随時追加時のNot Foundについて
今回問題となっているのが上記のような対応を行った後にサイト上でコンテンツを追加するようなケースです。 例えば本サイトのブログを投稿可能なものにした場合に、 投稿された瞬間に以下のようなURLで新規ページを公開したいといったケースになります。
/blogs/blog_new
難しい点
上記の回避方法はgenerate時に追加を行うというもののため、 デプロイ時にページ追加することはできるのですが投稿などでコンテンツを追加された場合はページ追加を行うことができません。 簡単な対応策として投稿され次第generateし直す方法もありますが、 投稿頻度などによっては大きな負荷となってしまいます。
対処法
色々試行錯誤した上今回選んだ対処法は動的ページをやめて、 get parameterで渡した値をもとにページを作ることを行いました。 具体的にはURLを以下のような構成に変更しました。
/blogs/blog?content=blog_new
ページ読み込み時に処理する内容が増えるため向き不向きがありますが、 速度が多く求められないケースなどでは有効なてかと思われます。
感想
今回随時ページが追加される際の回避方法についてまとめたのですが、 個人的には結構苦肉の策感が否めないので今後もより良い回避方法を模索できればと思います。 Not Found時のリダイレクト処理は記載できるので、 おそらくそこに色々書き加えて 「コンテンツページでNot Foundの場合はコンテンツを読み込んでページを返す」 といった処理を記載すればスマートな対応ができるような気がしています。
実は、ブログやECサイトの設計は、その後のデータ利活用にも大きく影響してきます。 そのため弊社は、中長期でのデータ活用を見据えたサイトの構築も日々最新情報をアップデートしております。 お困りの際は是非こちらよりお問い合わせください。