Масштабирование Nuxt 3

При переходе на Nuxt 3 с легаси SPA самой большой проблемой был не синтаксис, а смена ментальной модели на гибридный рендеринг.

Проблема Гибридности

В традиционном SPA клиент делает всё. В Nuxt 3 вы должны решать: что работает на сервере, что на клиенте, а что и там, и там.

// Ошибка: Думать, что это безопасно везде
const windowWidth = window.innerWidth // Упадет на сервере

Мы приняли жесткое разделение обязанностей:

1. Слой Данных: Composables, которые никогда не трогают DOM.
2. UI Слой: Компоненты, которые потребляют данные.
3. Слой Платформы: Плагины, обрабатывающие различия окружений.

Стратегия Кэширования

Мы использовали route rules для кэширования статических ответов API.

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { swr: 3600 }
  }
})

Это снизило наш TTFB с 400мс до 20мс для контентных страниц.