Nuxt.js
Тема дорожной карты · Frontend разработчик
Nuxt.js — это full-stack-фреймворк на основе Vue.js, привносящий server-side rendering, static site generation и автоматическое разделение кода в Vue-приложения через подход «соглашение вместо конфигурации». SSR с Nuxt.js настраивается в nuxt.config.ts, где параметр ssr: true (по умолчанию) включает серверный рендеринг, а режимы рендеринга для каждого маршрута задаются в опции routeRules, позволяя сочетать SSR, SSG и ISR в одном сайте. Получение данных в Nuxt использует composables useAsyncData и useFetch, автоматически дедуплицирующие запросы между сервером и клиентом и устраняющие проблему двойного fetch, характерную для SSR-приложений. Экосистема модулей Nuxt (пакеты @nuxtjs/) предоставляет интеграции для оптимизации изображений, i18n, аутентификации и управления состоянием Pinia, а серверный движок Nitro гарантирует, что SSR с Nuxt.js может развёртываться в Node.js, serverless-платформах или edge-рантаймах.
Как это работает
Nuxt.js рендерят React/Vue/Svelte на сервере, шлют HTML в браузер, гидратируют JavaScript для интерактивности. Next.js (React, App Router с Server Components) — доминирующий выбор; Remix (теперь React Router 7) делает упор на data loaders; Astro — islands-архитектура (в основном статика, гидратация выборочно); Nuxt для Vue; SvelteKit для Svelte; Qwik для resumability. Варианты: SSR (per-request), SSG (на сборке), ISR (периодическая ревалидация), edge rendering (ближе к юзеру).
Когда применять
SSR/SSG — когда важен SEO (блог, маркетинг, продуктовые страницы) или начальный HTML должен быть полезен до JS. Astro — для контент-first сайтов с в основном статикой. Next.js (App Router) — для full-stack React-приложений с микс SSR/SSG/CSR-нужд. Обычная SPA — когда SEO не важен (внутренние тулы, дашборды за auth).
Типичные ошибки
Ловушки Nuxt.js: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (краш — оборачивайте typeof window !== "undefined" или переносите в client-only); hydration mismatches (HTML сервера ≠ client render); огромные payload через getServerSideProps/loader убивают SSR-выигрыш; нет cache-заголовков на динамических маршрутах. Прочтите доки фреймворка про кеширование один раз.