nuxt/content の API を使ってないはずのページで API が 404 エラーを返す

何を言ってるんだかわからないと思いますが、私もよくわかりませんでした。

なにがおきてたのか

開発開始してしばらくたったあるタイミングから、コンソールに 404 エラーが流れるようになりました。

そのリクエストを見てると、たとえばこういうのとかで、

http://localhost:3000/api/_content/query?_params={"where":[{"_path":"/about"}],"first":true,"sort":[{"_file":1,"$numeric":true}]}

そのエラーが出るページというのは、content を使う予定がない、本当に静的な(ってのも変な言い方ですが)ページで、どうやら、Document Driven モードにしたことによって、全ページで暗黙的に対応する content を探そうとしていて(今回の例だと、content/about.md を探している)、でもそれが見つからないので、404 を返しているということみたいです。

対処

ざっくりと3つのアプローチがあります。

  1. config.content.documentDrivenfalse にする
  2. 対応するダミーの MD を置く
  3. 対象ページのみ Document Driven モードをやめる

config.content.documentDrivenfalse にする

当たり前ですが、Document Driven モードをやめれば消えます。
ただしそうすると、このモードでしか使えない便利な composable も使えなくなってしまいますのでこの案は却下ですね。

対応するダミーの MD を置く

対応するコンテンツファイルが無いことが原因なら、空でもいいから作っておけばいいんじゃね?っていう安直な考え方。
でも、用途もなくプレースホルダー的にファイルを置いておくのもどうなの?って気がするのでできればこれは最後の手段にしておきたいところです。
この方法の場合何かの弾みにファイルを消してしまうとまたぶり返しちゃいますしね。

対象ページのみ Document Driven モードをやめる

調べてみると、definePageMeta でページのメタデータをセットする際に、
documentDrivenfalse にすると、そのページのみ Document Driven モードを 解除できるようです。

fetchContentNavigation() · Nuxt Content

当然、このページでは useContent とかは使えなくなりますが、そもそもコンテンツMDが無いページというのは、Vueファイルに直にコンテンツを書き込んでいるか全く別のSDKをつかって中身を構成する場所なので、使えなくても問題がない場所なのでこれでよさそうですね。

ということで、この方法でいきます。

コンポーネントを修正する

ということで、エラーが出ていて、かつ本当に content を使う予定がないページにメタデータを埋め込んでいきます

<script setup lang="ts">
definePageMeta({
  documentDriven: false
})
</script>

で、ページをリロードして確認してみたところ、不要なフェッチによる 404 エラーは出なくなりました。

git log --format=%ct:%s

:add post 2023050901