Какие проблемы встречаются при работе с Nuxt

Что проверяют

Работали ли вы с Nuxt за пределами шаблона: понимаете ли, что код выполняется дважды, на сервере и в браузере, и какие ошибки из этого растут. Следом обычно спрашивают про гидрацию и про то, чем useFetch отличается от обычного $fetch.

Как отвечать

Сгруппируйте проблемы вокруг SSR, это ядро вопроса:

• код, который не работает на сервере: window, document и localStorage на сервере не существуют. Выход: onMounted, проверка import.meta.client, компонент <ClientOnly> или плагин с суффиксом .client.ts;
• hydration mismatch: серверная разметка не совпала с клиентской из-за Date.now(), Math.random(), часового пояса или данных из localStorage. Vue ругается в консоли и перерисовывает фрагмент, иногда с миганием;
• двойные запросы: $fetch прямо в setup выполняется и на сервере, и при гидрации. useFetch и useAsyncData передают результат с сервера в payload, и клиент повторно не ходит. Важны уникальные ключи, иначе данные разных компонентов перемешаются;
• утечка состояния между пользователями: ref на уровне модуля живёт в процессе Node и общий для всех запросов. Для общего состояния есть useState или Pinia, встроенной интеграции Vuex, как в Nuxt 2, больше нет;
• SEO: метатеги через useHead и useSeoMeta, режим рендеринга по маршруту через routeRules: prerender, SWR-кэш или только клиент;
• миграции: переход с Nuxt 2 был почти переписыванием (Vue 3, Nitro, Composition API), а сам Nuxt 2 не поддерживается с середины 2024 года. Переход на Nuxt 4 мягче, но меняет структуру проекта на каталог app/.

Подкрепите список одним своим случаем: что сломалось в проде и как вы это нашли.

Где спотыкаются

Отвечают про Nuxt 2 и Vuex как про текущее состояние. Если опыт только со второй версией, так и скажите, но покажите, что знаете, что изменилось.

Лечат ошибку гидрации оборачиванием всего в <ClientOnly>. Контент пропадает из серверного HTML, и SEO, ради которого брали Nuxt, теряется.

Называют медленный первый рендер проблемой фреймворка. Время ответа сервера зависит от ваших запросов в setup и от кэширования, и хороший ответ здесь про кэш на уровне Nitro и routeRules.