Разработка фронтенда на Vue.js 3: миграция, оптимизация и SSR

Разработка фронтенда сайта на Vue.js

Представьте: вы разрабатываете SPA с десятками экранов на Vue 2 и Vuex. Mixins становятся неуправляемыми, производительность падает, а типизация отсутствует. Vue 3 с Composition API — не просто новая версия, а смена парадигмы. Мы перевели десятки проектов с Vue 2 на Vue 3 и знаем, как избежать типичных ошибок миграции. Например, в одном проекте с 50+ компонентами мы сократили время загрузки на 40% и объём кода на 30% — всё благодаря рефакторингу на composables и оптимизации реактивных зависимостей. Бюджет такой миграции составляет значительную сумму в зависимости от размера кодовой базы.

Закажите консультацию, чтобы обсудить миграцию вашего проекта.

Какие проблемы решаем

• Переиспользование логики: вместо mixins используем composables — функции, которые можно комбинировать, как React hooks. Код становится предсказуемым и тестируемым.
• Типизация: TypeScript в Vue 3 — first-class citizen. defineComponent и <script setup lang="ts"> дают автодополнение и проверку типов на всех этапах.
• Производительность: Vue 3 до 2x быстрее Vue 2 за счёт Proxy-реактивности и виртуального DOM v3. Мы оптимизируем Core Web Vitals: LCP, CLS, INP. Это напрямую влияет на ранжирование в поисковых системах.
• SSR/SEO: с Nuxt 3 получаете SSR, SSG, ISR — страницы индексируются, а LCP падает на 40–60%. Дополнительно используем Suspense для управления загрузкой.

Почему Vue 3 Composition API лучше Options API?

Options API (data, methods, computed) заставляет разбивать логику одного компонента по разным опциям. При росте компонента это усложняет поддержку. Composition API группирует код по функциям:

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);

async function fetchData() {
  // ...
}

onMounted(() => fetchData());
</script>

<template>
  <div>
    <p>{{ count }} × 2 = {{ doubled }}</p>
    <button @click="count++">Увеличить</button>
  </div>
</template>

<script setup> — синтаксический сахар, не требует return. Логика переиспользуется через composables.

Как работает реактивность в Vue 3?

Vue 3 использует Proxy для реактивности. Ключевые примитивы:

• ref<T>() — для примитивов и объектов (доступ через .value)
• reactive({}) — для объектов (без .value)
• computed(() => ...) — вычисляемое значение
• watch() / watchEffect() — побочные эффекты

const user = reactive({ name: '', email: '' });
// Vs
const name = ref('');
// user.name vs name.value

Composables и переиспользование логики

Composable — это функция, использующая API композиции. Название начинается с use:

// composables/useAuth.ts
import { ref } from 'vue';

export function useAuth() {
  const user = ref(null);
  const isLoggedIn = computed(() => !!user.value);

  async function login(credentials) {
    user.value = await api.login(credentials);
  }

  return { user, isLoggedIn, login };
}

// В компоненте
const { user, isLoggedIn, login } = useAuth();

Composables позволяют вынести логику авторизации, работы с API, геолокации и т.д. Библиотека VueUse содержит 200+ готовых composables: useStorage, useIntersectionObserver, useClipboard. Экономия времени разработки на типовых задачах — от 30%.

Pinia — управление состоянием

Pinia — официальная замена Vuex. Сравнение:

// stores/cart.ts
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] as CartItem[] }),
  getters: {
    total: (state) => state.items.reduce((sum, item) => sum + item.price, 0),
  },
  actions: {
    addItem(item: CartItem) {
      this.items.push(item);
    },
  },
});

// В компоненте
const cart = useCartStore();
cart.addItem({ id: 1, price: 100 });

Vue Router 4

const routes = [
  { path: '/', component: HomePage },
  { path: '/blog/:slug', component: BlogPost, props: true },
  { path: '/admin', component: AdminLayout, meta: { requiresAuth: true },
    children: [
      { path: 'users', component: UserList },
    ]
  },
];

// Navigation guard
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !auth.isLoggedIn) return '/login';
});

Сравнение Vue 2 Options API vs Vue 3 Composition API

Экосистема

• VueUse — 200+ composables (useStorage, useIntersectionObserver)
• Quasar Framework — UI-компоненты + PWA/Electron
• PrimeVue — enterprise UI
• Vuelidate / VeeValidate — валидация форм
• Nuxt 3 — SSR/SSG/ISR фреймворк, аналог Next.js

Как мы работаем: процесс и сроки

1. Аналитика: изучаем требования, согласовываем архитектуру (SPA / SSR / SSG).
2. Проектирование: создаём компонентную модель, схемы маршрутов, прототипы.
3. Разработка: пишем код на Vue 3 + TypeScript, используем Pinia, покрываем тестами (Vitest).
4. Тестирование: unit-тесты, e2e (Cypress), проверка Core Web Vitals.
5. Деплой: настраиваем CI/CD, разворачиваем на вашем хостинге или Vercel.

Сроки: от 2 недель для SPA до 3 месяцев для комплексного приложения с real-time и аналитикой. Стоимость рассчитывается индивидуально.

Что входит в работу

• Исходный код в Git (private репозиторий)
• Документация компонентов (Storybook)
• Инструкция по деплою и настройке
• Демо-сессия и обучение команды
• Бесплатная поддержка первый месяц

Свяжитесь с нами для обсуждения вашего проекта. Получите консультацию и оценку за один день. Гарантируем качество кода и соблюдение дедлайнов. Наш опыт — 5+ лет и 50+ успешных проектов на Vue.js.

Фронтенд-разработка React: от аудита до production

Бандл вырос до 3.1 MB gzip — это реальная цифра из проекта, который пришёл к нам на аудит. Причина: moment.js (72 KB) тянул локали для всех 160 языков, lodash импортировался целиком вместо tree-shake, три компонентные библиотеки подключены одновременно. TTFB отличный, но TTI (Time to Interactive) на мобильном — 14 секунд. Пользователи уходили, конверсия упала на 40%. Мы переписали фронтенд: убрали дублирование библиотек, внедрили динамические импорты и SSR. Результат — бандл уменьшился до 850 KB gzip, TTI — 2.1 секунды, LCP — 1.8 с.

Frontend — это не «нарисовать красиво». Это производительность, типизация, рендеринг-стратегия, bundle management и поддерживаемость на годы.

Почему Next.js — стандартный выбор для SEO?

React — наш основной UI-фреймворк для сложных интерфейсов. Next.js — стандартный выбор для проектов с SEO-требованиями или SSR. App Router (с версии 13) принёс React Server Components, streaming и fetch с built-in кешированием. Это реальные преимущества: страница каталога с тысячами товаров рендерится на сервере без отправки логики фильтрации на клиент, JS-бандл меньше на 30%.

Но App Router — другой способ мышления. "use client" нужно ставить осознанно. Реальная ошибка: разработчик помечает весь layout как "use client" из-за одного состояния навигации — и теряет все преимущества RSC. Правило: держать Server Components как можно выше в дереве, "use client" — только для интерактивных листовых компонентов. ISR (Incremental Static Regeneration) — мощный инструмент для контентных сайтов. На каталоге из 50 000 страниц с ISR и CDN — TTFB < 50 ms для любой страницы.

Как TypeScript предотвращает баги в продакшене?

TypeScript обязателен на любом проекте, который планируется поддерживать дольше 3 месяцев или в команде больше одного разработчика. Аргумент «пишем быстро без типов» работает только первые 2 недели. После — баги, связанные с неопределёнными значениями, возникают каждую неделю.

Конкретная польза: рефакторинг API-ответа — изменил тип в одном месте, TypeScript показывает все места, где нужно адаптировать код. Без типов — баг в продакшене через неделю. strict: true в tsconfig.json — обязательно. noImplicitAny, strictNullChecks, strictFunctionTypes. Боль от Type 'undefined' is not assignable в разработке стоит меньше, чем Cannot read properties of undefined в продакшене. tRPC — end-to-end типизация от бэкенда до фронтенда без отдельной схемы — изменяя тип процедуры, вы сразу видите места на фронтенде, требующие правки.

Vue 3 + Nuxt 3 — альтернативный стек для SSR

Vue 3 с Composition API — другой стиль разработки, ближе к React Hooks. <script setup> и composables делают код более переиспользуемым. Nuxt 3 — фреймворк для Vue с SSR/SSG, аналогичный Next.js. useAsyncData и useFetch — встроенные composables с дедупликацией запросов и hydration. Auto-imports удобны, но могут запутывать при debug. Nuxt Content — модуль для Markdown/MDX-файлов, идеален для документации.

Hydration mismatch — специфическая боль SSR на Vue и React. Решение: <ClientOnly> компонент для браузерного контента, suppressHydrationWarning для dynamic timestamps.

Производительность: метрики и инструменты

Bundle analysis — стартовая точка. @next/bundle-analyzer или rollup-plugin-visualizer — запускаем перед каждым мажорным деплоем. Цель: ни одна страница не должна требовать > 200 KB JS gzip для first paint.

Динамические импорты для тяжёлых компонентов:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типичные кандидаты на dynamic import. Без этого они попадают в основной бандл. React DevTools Profiler — для поиска лишних ре-рендеров. React.memo, useMemo, useCallback — точечные инструменты. Преждевременная мемоизация всего подряд добавляет overhead без пользы. Профилируйте сначала, оптимизируйте потом.

Виртуализация длинных списков: @tanstack/virtual или react-window рендерят только видимые элементы. Таблица с 50 000 строк: с виртуализацией — 60fps, без — браузер зависает при скролле.

State management: без оверинжиниринга

Для большинства приложений достаточно:

• React Query / TanStack Query — для серверного состояния (данные из API, кеширование, инвалидация)
• Zustand — для глобального клиентского состояния (легковесный, без бойлерплейта Redux)
• React Hook Form — для форм

Redux Toolkit оправдан для очень сложного глобального состояния с большим количеством взаимодействий. Для большинства задач — это overkill. Recoil, Jotai — атомарные подходы для независимых кусков состояния.

CSS и дизайн-система

Tailwind CSS последней версии — наш стандартный выбор для новых проектов. Utility-first, отличная интеграция с компонентными библиотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива когда нужна более явная изоляция стилей. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненты с полным контролем над стилями. Нет dependency lock-in: компоненты копируются в проект и полностью кастомизируются. Storybook — для документирования компонентной библиотеки. React DevTools Profiler — официальный инструмент от команды React.

Тестирование

E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.

Ориентиры по срокам и состав работ

Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.

Что входит в работу: исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.

У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в документации React и TypeScript. Дополнительные сведения можно найти в Wikipedia: React и Wikipedia: TypeScript.

Какой стек выбрать для фронтенд-разработки React?

Мы сравниваем инструменты по реальным метрикам. Next.js быстрее Nuxt в сборке SSR на 20–30% при одинаковом размере страницы. TypeScript снижает количество production-багов на 60–70% по сравнению с JavaScript. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.

Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.