NuxtJS 動的に生成したページをリロードしたらpreloadedの警告がでる件

Question

前提

環境

Nuxt: 2.15.3
Nuxt Content: 1.11.1
Netlify

ページ構成

pages/
  post/
    _slug.vue
  index.vue

設定（nuxt.config.js）

export default {
  ssr: true,
  target: 'static',
  //....
  generate: {
    fallback: true,
    async routes() {
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts', { deep: true })
        .only(['slug'])
        .fetch()
      return posts.map((post) => `post/${post.slug}`)
    },
  }
}

Netlifyの設定

• _redirect

/*  /index.html  200

• Prerendering

Netlifyの設定にあるPrerenderingは有効にしています。

実現したいこと

Nuxt Contentを使用したブログを作成しています。
OGPの設定を活かすために、SPAではなくSSGとして生成したページをNetlifyで公開しようとしています。

記事のコード

• slug.vue

export default {
  async asyncData({ params, error, $content }) {
    //記事の取得
    let post = await $content('posts', { deep: true })
      .where({ slug: params.slug })
      .fetch()
    post = post[0]
    //関連記事の取得
    const relation = await $content('posts', { deep: true })
      .only(['title', 'slug', 'image'])
      .where({ tags: { $contains: post.tags }, slug: { $ne: post.slug } })
      .sortBy('createdAt', 'desc')
      .limit(5)
      .fetch()
    return {
      post,
      relation,
    }
  },
}

発生している問題・エラーメッセージ

動的に生成したページ（_slug.vue）をリロードすると、ブラウザで以下の警告がでます。

(index):1 The resource <url>/payload.js was preloaded using link preload but not used within a few seconds from the window's load event. 
Please make sure it has an appropriate `as` value and it is preloaded intentionally.

このページのpayload.jsの読み込みが遅いせいなのか、うまく動作しないところがあります。
この警告の解決方法がわかる方がいらっしゃいましたら、ご教授お願いします。

Answer 1

slugでページを構成していましたが、これをpath（Nuxt Contentのディレクトリ構成）に変更することで解決しました。
なぜこれで解決できるのか、根本的な理由はよくわかっていません。

• ページ構成

pages/
  post
    _category
      _slug.vue
  index.vue

• nuxt.config.js

export default {  
  generate: {
    fallback: true,
    async routes() {
      const { $content } = require('@nuxt/content')
      const files = await $content('post', { deep: true })
        .only(['path'])
        .fetch()
      return files.map((file) => (file.path === '/index' ? '/' : file.path))
    },
  },
}

• _slug.vue

export default {
  async asyncData({ params, error, $content }) {
    let post = await $content('post', { deep: true })
      .where({ slug: params.slug })
      .fetch()
    post = post[0]
    const relation = await $content('post', { deep: true })
      .only(['title', 'slug', 'image', 'path'])
      .where({ tags: { $contains: post.tags }, slug: { $ne: post.slug } })
      .sortBy('createdAt', 'desc')
      .limit(5)
      .fetch()
    return {
      post,
      relation,
    }
  },
}

Answer 2

ブラウザで以下の警告がでます。

この警告自体は気にしなくて構いません。「<link rel="preload">でファイルを参照したけれど実際には使わなかった」というだけです。

Comments

[b-c]

回答ありがとうございます。
「実際には使わなかった」というのが問題で、payload.jsが読み込まれていないがためにjs側でエラーになってしまうのです。