NuxtのuseAsyncDataのキーを安易にroute.pathにしてはいけない

useAsyncData の key とは

• useAsyncData · Nuxt Composables

<script setup>
const { data } = await useAsyncData('home', () => queryContent('/').findOne())
</script>

<template>
  <pre>
    {{ data }}
  </pre>
</template>

key は重複してはいけない

• Upgrade Guide · Nuxt

const route = useRoute()
const { data } = await useAsyncData(
  route.path,
  () => queryContent(route.path).findOne()
)

route.path を指定した場合の問題

const route = useRoute()
const { data: surround, error: surroundError } = await useAsyncData(
  `${route.path}_surround`,
  () => {
    // データを取得する処理
  },
)

URL と判定されない key を使用する

/**
 * パスからuseAsyncDataで使用するキーを生成する
 * @param path useAsyncDataで取得するコンテンツのパス
 * @param name 指定したパスに関連して取得するデータの一意な名前
 * @returns useAsyncDataで使用するキー
 */
export const pathToUseAsyncDataKey = (
  path: string,
  ...name: string[]
): string => {
  const generatedPath = path
    .split('/')
    .filter((item) => item)
    .join('-')
  const generatedName = name.map((item) => `_${item}`).join('')
  return `${generatedPath}${generatedName}`
}