Запрос данных в Nuxt

Странице со списком пользователей нужен массив имён из сети. Обычный fetch в setup на сервере и снова в браузере после гидратации даёт двойной запрос. Функция useFetch в Nuxt координирует эту работу: один раз получает JSON и делает его доступным и в HTML, и в интерактивной части страницы.

Сделаем страницу /users. В users.vue вызовем функцию useFetch с адресом тестового API и дождёмся ответа через await в setup:

<script setup>
	const { data } = await useFetch(
		'https://jsonplaceholder.typicode.com/users',
	);
</script>
<template>
	<p>
		Users
	</p>
</template>

Поле data - это ref с телом ответа. В шаблоне ref разворачивается сам, поэтому в v-for можно перебирать data напрямую, без .value. Выведем имя каждого пользователя. При первом открытии /users список уже будет в HTML, а после гидратации повторного запроса к API не потребуется:

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

Сделайте страницу /products, которая запрашивает товары с тестового API и выводит их названия списком.

Проверьте исходный код ответа сервера для /products: имена товаров должны быть в HTML до загрузки клиентского скрипта.