> Какие проблемы встречаются при работе с Nuxt (Vue.js)

Короткий ответ

Основные проблемы при работе с Nuxt: сложности с SSR (hydration mismatch, доступ к browser API), управление состоянием между сервером и клиентом, настройка middleware и плагинов для изоморфного кода, конфигурация маршрутизации и code splitting, а также неочевидные баги при работе с динамическими импортами и сторонними библиотеками, не поддерживающими SSR.

Подробное объяснение

Nuxt - это фреймворк на основе Vue.js, который добавляет SSR, статическую генерацию и автоматическую маршрутизацию. Основные проблемы:

1. Hydration mismatch - когда HTML, сгенерированный на сервере, не совпадает с тем, что Vue рендерит на клиенте. Возникает из-за случайных значений (Math.random, Date.now), данных из localStorage или асинхронных операций с разными результатами.

2. Доступ к browser API - на сервере нет window, document, localStorage. Код, использующий их, нужно оборачивать в process.client или onMounted.

3. Управление состоянием - хранилище (Pinia, Vuex) должно быть изолированным для каждого запроса, иначе данные утекут между пользователями. Использование синглтонов на сервере - частая ошибка.

4. Плагины и middleware - порядок выполнения, доступ к контексту (req, res) и корректная обработка ошибок в серверной части.

5. Динамические импорты - проблемы с lazy loading компонентов, которые должны быть доступны на сервере, или с библиотеками, которые не экспортируются корректно.

6. Конфигурация - сложности с настройкой proxy, env-переменных, кастомных build-модулей и интеграцией с внешними API.

На практике

В реальных проектах чаще всего сталкиваются с:

• Hydration errors при использовании сторонних UI-библиотек (например, компоненты с анимациями или случайными ID). Решение - оборачивать такие компоненты в <ClientOnly> или использовать ssr: false в конфигурации плагина.
• Проблемы с аутентификацией - middleware на сервере не имеет доступа к cookies браузера, если не настроен properly. Нужно использовать req.headers.cookie и передавать токен через httpOnly cookies.
• Медленная сборка - при большом количестве страниц и динамических маршрутов. Решение - настройка generate.routes для статической генерации или использование target: 'server'.
• Сложности с i18n - интернационализация требует особого подхода к маршрутизации и хранению переводов, чтобы не дублировать данные на сервере.

Пример кода

<template>
  <div>
    <!-- Проблема: Math.random даст разные значения на сервере и клиенте -->
    <p>Случайное число: {{ randomNumber }}</p>
    
    <!-- Решение: используем ClientOnly -->
    <ClientOnly>
      <p>Случайное число (только клиент): {{ randomNumber }}</p>
    </ClientOnly>
  </div>
</template>

<script setup>
// Проблема: на сервере нет window
// const width = ref(window.innerWidth) // ошибка

// Решение: проверяем окружение
const width = ref(0)
if (process.client) {
  width.value = window.innerWidth
}

// Или используем onMounted
onMounted(() => {
  width.value = window.innerWidth
})

// Проблема с random
const randomNumber = ref(Math.random()) // будет mismatch
</script>

JAVASCRIPT
// middleware/auth.js - проблема с доступом к cookies
export default defineNuxtRouteMiddleware((to, from) => {
  // На сервере req доступен через useRequestEvent
  const event = useRequestEvent()
  if (process.server && event) {
    const token = getCookie(event, 'auth_token')
    // ...
  }
  // На клиенте используем useCookie
  const token = useCookie('auth_token')
})

Как отвечать на собеседовании

Начни с перечисления ключевых проблем, затем выбери 2-3 и разбери их подробно с примерами. Покажи понимание различий между серверным и клиентским окружением. Упомяни, как решаешь hydration mismatch (ClientOnly, onMounted, проверка process.client). Расскажи про изоляцию состояния между запросами (useState, Pinia с контекстом). Если спросят про производительность - упомяни code splitting, lazy hydration и настройку generate.

Что проверяет интервьюер

• Понимание SSR и его ограничений (hydration, browser API)
• Умение работать с контекстом Nuxt (middleware, plugins, hooks)
• Знание lifecycle Vue в контексте SSR (serverPrefetch, onMounted)
• Опыт с реальными багами и способами их дебага
• Умение настраивать конфигурацию под разные target (server, static)

Типичные ошибки

• Использование window или document без проверки окружения
• Создание глобальных синглтонов для состояния (утечка данных между пользователями)
• Игнорирование hydration mismatch - думают, что это "само исправится"
• Неправильная настройка middleware для аутентификации (нет доступа к cookies на сервере)
• Использование asyncData без обработки ошибок на сервере (краш страницы)
• Забывают про ssr: false для плагинов, которые не работают на сервере