Ключ запроса в Nuxt

У функции useAsyncData первый аргумент - ключ. Под этим именем Nuxt сохраняет результат обработчика и передаёт его в HTML, чтобы клиент подхватил те же данные без повторного запуска.

Если на сайте два вызова с одним и тем же ключом, они делят один кэш: второй вызов не загружает заново, а получает уже готовое значение первого. Это удобно для одной сущности на разных компонентах, но опасно, когда ключи случайно совпали у разных задач.

Давайте изучим страницу сотрудников. Зададим ключ staff и загрузим пользователей через обработчик:

<script setup>
	const { data } = await useAsyncData(
		'staff',
		() => $fetch(
			'https://jsonplaceholder.typicode.com/users',
		),
	);
</script>
<template>
	<ul>
		<li
			v-for="person in data"
			:key="person.id"
		>
			{{ person.name }}
		</li>
	</ul>
</template>

На другой странице для постов нужен свой ключ. Если вызвать useAsyncData с тем же staff, но другим URL, в data останутся пользователи от первого запроса, а список постов так и не появится. Имена ключей должны однозначно описывать, что лежит в кэше:

<script setup>
	const { data } = await useAsyncData(
		'posts',
		() => $fetch(
			'https://jsonplaceholder.typicode.com/posts',
		),
	);
</script>
<template>
	<ul>
		<li
			v-for="post in data"
			:key="post.id"
		>
			{{ post.title }}
		</li>
	</ul>
</template>

Ключ пишут строкой. Его видно в коде страницы и по нему же Nuxt сопоставляет payload между сервером и браузером.

Сделайте страницу /orders, которая загружает заказы через useAsyncData с отдельным ключом, не совпадающим с ключами других списков в проекте.

Сделайте две страницы с разными данными и убедитесь, что у каждой свой ключ: на одной выводятся пользователи, на другой - посты, без подмены массивов.