Разработка фронтенда сайта на Nuxt.js
Ваш Vue-сайт не индексируется, а первый отклик (LCP) за 3 секунды? Это типичная проблема SPA без серверного рендеринга (SSR). Мы используем Nuxt.js, чтобы устранить узкие места: SSR для поисковиков, статику (SSG) для контентных страниц и бесшовный деплой. За 10+ лет опыта мы реализовали более 50 проектов на Nuxt/Vue и гарантируем Core Web Vitals на уровне «зелёного». В одном из кейсов мы ускорили LCP с 3 секунд до 0.9 секунды, а затраты на хостинг снизили в 3 раза по сравнению с предыдущей SPA-архитектурой. Оцените свой проект за один день — свяжитесь с нами.
Почему Nuxt.js подходит для вашего проекта?
Nuxt.js — мета-фреймворк для Vue 3 с SSR, SSG, файловой маршрутизацией и серверными эндпоинтами. Для Vue это то же, что Next.js для React. Nuxt 3 использует Nitro как server engine — он деплоится на Node.js, Vercel, Netlify Edge Functions, Cloudflare Workers. Сравните режимы:
| Режим | Скорость загрузки | SEO | Применение |
|---|---|---|---|
| SPA (без SSR) | LCP 2–4 сек | Низкая (требуется JS) | Админки, личные кабинеты |
| SSR | LCP 1–1.5 сек | Высокая (HTML сразу) | Магазины, лендинги, новости |
| SSG | LCP <1 сек | Высокая (статика) | Блоги, документация |
Для большинства бизнес-сайтов мы выбираем SSR — он даёт мгновенный контент и отлично индексируется. SSR в 2–3 раза быстрее SPA по LCP и TTFB. Например, после перехода на SSR наш клиент увидел рост органического трафика на 40% за месяц.
Как настроить SSR для максимальной производительности?
Ключевой приём — использовать useAsyncData с lazy: false и кэшировать запросы на уровне Nitro. Например, для списка постов:
<script setup> const { data: posts } = await useAsyncData('posts', () => $fetch('/api/posts', { params: { limit: 20 } }) ); </script> Данные запрашиваются один раз на сервере, передаются клиенту через payload — без повторного запроса. Это снижает нагрузку и ускоряет отрисовку. В продакшене мы добавляем HTTP-кэширование через setHeader(event, 'Cache-Control', 's-maxage=60') в server routes.
Какие модули Nuxt.js используют в продакшене?
Экосистема Nuxt включает готовые модули для типовых задач. Вот сравнение часто используемых:
| Модуль | Назначение | Преимущество |
|---|---|---|
| @nuxt/image | Оптимизация изображений | Автоматический WebP, lazy loading |
| @nuxtjs/tailwindcss | Утилитарные стили | Быстрая кастомизация |
| @pinia/nuxt | Управление состоянием | SSR-совместимость |
| @nuxt/content | Контентные страницы | Markdown/JSON как данные |
| nuxt-auth-utils | Авторизация | JWT и OAuth из коробки |
Подключаем только нужные под задачу — это уменьшает bundle на 15–20%.
Файловая маршрутизация
pages/ ├── index.vue → / ├── about.vue → /about ├── blog/ │ ├── index.vue → /blog │ └── [slug].vue → /blog/:slug └── [...slug].vue → catch-all маршрут Каждый файл в pages/ — маршрут. Никакой конфигурации роутера.
useAsyncData и useFetch
<script setup> const { data: posts, pending, error } = await useFetch('/api/posts', { query: { page: 1, limit: 10 }, lazy: false, }); const { data } = await useAsyncData('posts', () => $fetch('/api/posts').then(r => r.items) ); </script> useFetch и useAsyncData на сервере выполняются один раз, результат передаётся клиенту через useNuxtApp().payload — без повторного запроса на клиенте (deduplication).
Server Routes (Nitro)
Nuxt 3 позволяет писать серверную логику рядом с UI:
// server/api/posts/[id].get.ts export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id'); const post = await db.post.findUnique({ where: { id: Number(id) } }); if (!post) throw createError({ statusCode: 404 }); return post; }); Файлы в server/api/ становятся API-эндпоинтами. .get.ts, .post.ts — HTTP-метод определяется именем файла.
SEO и useHead
<script setup> useHead({ title: 'Заголовок страницы | Сайт', meta: [ { name: 'description', content: 'Описание' }, { property: 'og:image', content: '/og.jpg' }, ], link: [{ rel: 'canonical', href: 'https://example.com/page' }], }); </script> Или через useSeoMeta composable:
useSeoMeta({ title: 'Title', ogTitle: 'OG Title', description: 'Desc' }); Согласно документации Nuxt 3, серверный рендеринг гарантирует полную индексацию страниц поисковыми системами.
Как мы деплоим Nuxt.js?
Команда nuxt build + node .output/server/index.mjs — Node.js сервер. nuxt generate — статический сайт. Vercel/Netlify определяют Nuxt автоматически. Docker: стандартный Node.js образ. Мы также настраиваем CI/CD (GitHub Actions) для автоматического деплоя при пуше в main.
Что входит в работу
- Разработка фронтенда «под ключ»: вёрстка, интеграция с API, SEO-оптимизация.
- Настройка SSR/SSG, маршрутизации, серверных эндпоинтов.
- Подключение модулей: изображения, стили, авторизация.
- Деплой на ваш хостинг или бессерверную платформу.
- Тестирование Core Web Vitals и правка узких мест.
- Передача репозитория, документация по развёртыванию.
- Гарантия на работу 6 месяцев и поддержка после запуска.
Сроки
Сайт на Nuxt.js с SSR/SSG, Nuxt Content, SEO: 1–3 недели. SPA с бэкенд-интеграцией, авторизацией, сложным UI: 2–5 недель. Стоимость рассчитывается индивидуально после брифа.
Получите консультацию по вашему проекту — свяжитесь с нами. Опыт 10+ лет и гарантия качества на каждый проект. Закажите предварительную оценку сроков и бюджета — это бесплатно.