Коммерческое предложение · Ускорение сайта

Ускорим Ваш сайт и усилим SEO — на Next.js и Вашем API

Речь про Ваш уже работающий публичный сайт: отдельный frontend на Next.js с серверным HTML, meta и Open Graph и прямой интеграцией с Вашим ASP.NET Core Web API.

Смотреть тарифыСостав работ
Next.js 16
Актуальная ветка, SSR/ISR
Ваш .NET API
REST без «лишнего» UI на сервере
от 55 000 ₽
Старт с MVP главной

О проекте

Задача — ускорить работу текущего сайта и заложить основу под развитие: MVP на Next.js, измеримые метрики и поэтапный перенос без остановки бизнеса.

Бизнес-эффект для Вас

  • ✓Вы получаете ощутимо более быструю первую отрисовку и меньше «подвисаний» для посетителей — особенно на мобильных сетях.
  • ✓Вы усиливаете SEO: серверный HTML, предсказуемые meta и Open Graph — без компромиссов классического SPA.
  • ✓Вы закладываете фундамент: тот же подход потом масштабируется на остальные страницы сайта, не переписывая архитектуру с нуля.

Технический MVP

  • ✓Ваш backend остаётся на .NET: frontend ходит к Вам по REST, типы и ошибки обрабатываются явно.
  • ✓MVP — главная с подборками: данные с API, карточки, изображения, SSR/ISR под частоту обновления каталога.
  • ✓ЧПУ и расширенная разметка — там, где это даст Вам трафик и удобство шаринга (согласуем по вопроснику и ТЗ).

Сейчас у Вас

  • •Сайт на связке с Blazor Server: функциональность есть, но каждый визит «дороже» по времени и нагрузке на сервер.
  • •Страницы сильнее зависят от сети и серверных сессий, чем классический SSR-HTML — это часто бьёт по скорости и SEO.

Что Вы получите с нами

  • •Next.js как отдельный слой отдачи: быстрый HTML с сервера, кеширование (ISR), гидратация только нужных блоков.
  • •Прозрачный слой интеграции с Вашим API, аккуратные состояния загрузки и ошибок — удобно развивать дальше.

Кратко по задаче

Главное в одном месте: архитектура, API, скорость, SEO, стек и то, что Вы забираете после работ.

Отдельный frontend и Ваш .NET API

Вы получаете автономное приложение на Next.js, которое общается с уже существующим ASP.NET Core Web API по HTTP (REST). UI отделён от сервера API — проще масштабировать, кешировать и ускорять отдачу страниц.

MVP: главная с подборками

Мы реализуем загрузку списка подборок с Вашего эндпоинта, карточки с изображениями и текстами, аккуратные состояния загрузки и ошибок и адаптивную вёрстку под мобильные и десктоп.

Быстрая первая загрузка (SSR / SSG / ISR)

Для витринных страниц Вы получаете серверный HTML «с первого байта», а не пустой SPA-скелет. Для каталогов и подборок мы подберём режим SSR или ISR с revalidate — чтобы снизить нагрузку на API и ускорить повторные визиты.

SEO: не «чистый SPA»

Настраиваем title и description, Open Graph (в т.ч. для шаринга в соцсетях), при необходимости — человекопонятные URL для карточек и разделов. Поисковики и соцсети видят полноценный HTML сразу.

OpenAPI / Swagger (по желанию)

В расширенном пакете мы закрепляем автогенерацию TypeScript-типов и HTTP-клиента из Вашей спецификации (например, openapi-typescript + orval в CI). Это экономит время команды и снижает риск расхождения контрактов.

Что будет на выходе

Готовый репозиторий frontend, рабочая главная с подборками, настроенная интеграция с API, SSR-стратегия под задачу, README с запуском и краткое описание архитектуры — в согласованных рамках тарифа.

Рядом с текущим сайтом

Стартуем с MVP-главной на Next.js, снимаем метрики по скорости и SEO, затем расширяем охват на остальные страницы. При необходимости новый frontend временно работает на отдельном домене или поддомене — основной трафик с действующего сайта переключаем после приёмки.

Какой стек мы Вам рекомендуем

База для нового слоя — Next.js 16.x: скорость первой отдачи, SEO, интеграция с .NET и удобное развитие продукта командой.

Почему Next.js под Ваш сценарий

  • ✓Вы получаете App Router и React Server Components: HTML с сервера по умолчанию и меньше лишнего JavaScript в браузере.
  • ✓Вы используете встроенное кеширование fetch, ISR и segment config — без самописного «полу-SSR».
  • ✓Вы остаетесь на самом массовом стеке для найма и развития продукта — React и Next.js.

Next.js (React)

Наш главный рекомендуемый вариант для Вас

Плюсы для Вас: Next 16: SSR/ISR из коробки, Image, Metadata API, зрелая связка с OpenAPI-генераторами и .NET.

Нюансы: Нужна дисциплина Server/Client Components — мы заложим это в архитектуру и README.

Как мы настроим SSR / ISR / SSG под Вас

  • SSR: Когда Вам важна максимальная свежесть данных на каждый запрос.
  • ISR: Когда подборки меняются редко: быстрый HTML + контролируемое обновление без долгого полного SSG.
  • SSG / гибрид: Когда у Вас есть редко меняющиеся блоки — выжимаем максимум скорости.

OpenAPI / Swagger — Ваш плюс

  • +Мы можем подключить openapi-typescript (типы) + orval (клиент и при необходимости react-query) в Ваш CI.
  • +Либо сгенерировать клиент через NSwag/OpenAPI Generator — важно одно: единый источник правды в swagger.json.

Что именно мы для Вас делаем

MVP закрывает Ваш запрос: главная с подборками, SSR/SEO и интеграция с API. Расширенный контур готовит продукт к росту без переделки фундамента — когда Вы будете готовы масштабировать на весь сайт.

MVP

Быстрый запуск новой главной

  • ✓Инициализация репозитория Next.js 16 (TypeScript, ESLint, Tailwind CSS v4) под Ваши процессы.
  • ✓Архитектура, удобная Вам в долгую: app/, components/, services/, types/, lib/, hooks/.
  • ✓HTTP-слой к Вашему .NET API: обёртка над fetch, таймауты, обработка ошибок и пустых ответов.
  • ✓Ручные типы DTO под эндпоинт подборок до подключения автогенерации из Swagger.
  • ✓Главная страница: SSR Server Component, список подборок, карточки (изображение, заголовок, описание).
  • ✓Состояния UI: загрузка / ошибка / пустой список; адаптивная сетка под мобильный и десктоп.
  • ✓Базовое SEO: Metadata API (title, description), Open Graph (og:title, og:description, og:image при наличии данных).
  • ✓README для Вашей команды: запуск, переменные окружения, краткое описание архитектуры.

Расширенный контур

Когда Вы готовы расти дальше

  • +Автогенерация клиента и типов по Вашему Swagger (orval + openapi-typescript или аналог в CI).
  • +ISR / revalidate: снижаем нагрузку на Ваш API и стабилизируем отдачу каталога подборок.
  • +Расширенный SEO-пакет: JSON-LD по согласованной схеме, sitemap.xml, robots.txt, canonical.
  • +Страница подборки с ЧПУ URL (динамический сегмент, generateMetadata под Ваши поля).
  • +UI в коде в духе текущего сайта: токены, типографика и переиспользуемые компоненты — не новый бренд, а перенос привычного вида в слой компонентов для скорости поддержки.
  • +CI/CD: GitHub Actions — lint, typecheck, build; шаблон деплоя (Docker standalone или Ваш хостинг).
  • +ADR: 1–3 коротких architecture decision record (рендеринг, кеш, слой API) — чтобы Вам было проще сопровождать.

Инвестиция и форматы работы

Два понятных пакета: быстрый старт, чтобы Вы увидели результат на главной, и фундамент — когда Вы готовы сразу заложить OpenAPI, SEO и CI под рост.

Тариф 1

Быстрый старт

MVP: главная с подборками, SSR, базовое SEO, интеграция с Вашим API.

от 55 000 ₽ · 14–18 рабочих дней

  • ✓Всё из блока MVP в составе работ (см. раздел выше).
  • ✓Один контур деплоя: рекомендации + Dockerfile или понятная инструкция под Ваш хостинг.
  • ✓Базовая проверка скорости загрузки и список точечных правок в рамках согласованного объёма.

Тариф 2

Масштабируемая база

OpenAPI, ISR, SEO-пакет, детальная страница, UI-кит в коде под текущий вид, CI, ADR.

от 95 000 ₽ · 21–24 рабочих дней

  • ✓Всё из тарифа 1 + расширенный контур (OpenAPI, ISR/SEO-пакет, детальная страница, UI-кит в коде под текущий вид, CI, ADR).
  • ✓Настройка revalidate и стратегии инвалидации кеша под то, как часто у Вас обновляются подборки.
  • ✓Расширенный чеклист производительности и правки в рамках согласованного объёма.

Не входит в базовые тарифы

  • • Полная смена визуального концепта и бренда с нуля — оценим отдельно, если Вам понадобится именно редизайн, а не перенос текущего вида.
  • • Мобильные нативные приложения и публикация в сторах.
  • • Сквозная аналитика, рекламные кампании и контент-маркетинг.

Почему мы рекомендуем тариф 2

Вы экономите недели на типах

Автогенерация из Swagger убирает ручной дрейф между .NET и TypeScript — меньше багов при изменениях API.

Вы разгружаете свой API

ISR и кеш на edge/CDN разгружают origin при росте трафика ботов и пользователей — серверу проще держать нагрузку.

Вы снижаете риск на проде

CI/CD и артефакты сборки — меньше ручных деплоев и «случайно забыли шаг» при расширении команды.

Важно по стоимости

Цифры на странице — ориентир «от» и не являются публичной офертой до подписания договора. Финальная стоимость для Вас фиксируется после ответов на вопросник, уточнения объёма и согласования технического задания.

Инфраструктура и интеграция

Ваш frontend живёт отдельно от .NET API: мы поможем согласовать CORS, выбрать среду для Node и настроить кеш/CDN под Ваши медиа — чтобы скорость росла вместе с аудиторией.

Что нужно от Вашей инфраструктуры (SSR)

  • ✓Node.js LTS (рекомендуем v22) — стандартный runtime для production Next.js.
  • ✓2–4 vCPU, 4–8 GB RAM — комфортный старт для SSR главной и ISR-страниц под Ваш трафик.
  • ✓NVMe SSD от 40 GB под артефакты, логи и кеш сборки в CI.

Как Вы можете выкатывать релизы

  • +Docker: multi-stage build, `next build` + `output: 'standalone'` — удобно, если Вы любите контейнеры.
  • +VPS / облако: systemd или оркестратор, reverse-proxy (nginx/Traefik) с gzip/brotli.
  • +Vercel / аналог — если Ваша политика безопасности и инфраструктура это допускают.

CORS и Ваш .NET API

  • •На стороне ASP.NET Core: разрешаем origin Вашего нового frontend, методы GET/OPTIONS и остальное по факту API.
  • •Заголовки CORS и credentials — только если Вам реально нужны cookies между доменами.
  • •Для витрины и каталога часто достаточно read-only эндпоинтов или токена в заголовке — уточним по Вашему вопроснику.

CDN и изображения

  • ✓Изображения подборок: next/image + CDN или прокси к Вашему storage — быстрее показ ключевых картинок.
  • ✓Кеш статики на edge: меньше нагрузки на origin и приятнее пользователям по всей стране.

Сроки и этапы

Ниже — ориентиры при своевременной обратной связи с Вашей стороны и доступности Swagger или stage API.

Этапы проекта

  1. 1Вопросник и материалы от Вас: ответы по API, доступы, метрикам и переключению трафика — мы сами проверяем контракт и среду.
  2. 2Архитектурные решения + ADR (рендеринг, кеш, слой интеграции).
  3. 3Инициализация репозитория, lint/typecheck, базовый CI под Ваш Git.
  4. 4Вёрстка главной, карточки подборок, состояния загрузки и ошибок.
  5. 5Интеграция с Вашим API и согласование полей DTO.
  6. 6SEO (metadata, OG), проверка HTML в DevTools / Rich Results в рамках выбранного тарифа.
  7. 7QA, правки по чеклисту, инструкция деплоя для Вашей команды.
  8. 8Публикация на согласованной среде и smoke-тесты перед переключением трафика.

Оценка по тарифам

ЭтапТариф 1Тариф 2
Вопросник + проверка доступов1–2 дня2–3 дня
Инициализация + CI2–3 дня3–4 дня
UI главной + интеграция API8–9 дней9–10 дней
SEO + производительность3–4 дня4 дня
Расширенный контур (тариф 2)—3 дня

Итоговый календарь фиксируем после Ваших ответов на вопросник: число полей в карточке, авторизация API, отдельная страница подборки и глубина SEO влияют на сроки. Мы заранее проговариваем риски, чтобы Вы спокойно планировали переключение трафика с текущего сайта без сюрпризов.

Условия и опции

Что входит в договор, что обсуждаем отдельно и как принимаем результат.

Условия

  • • Предоплата: 50% до старта, 50% перед релизом на согласованной среде.
  • • Раунды правок: до 2 для тарифа 1, до 4 для тарифа 2 — в рамках утверждённого с Вами ТЗ.
  • • Гарантийный период после запуска: 14 календарных дней на дефекты реализации.
  • • Поддержка и развитие после гарантии — отдельным пакетом или почасовка, как Вам удобнее.

Дополнительные опции

  • • Дополнительные разделы сайта (категории, поиск, личный кабинет) — оценим отдельно под Ваш roadmap.
  • • Отдельный визуальный концепт «с нуля» — только если Вы захотите сменить стиль; перенос текущего вида в компоненты входит в логику тарифов.
  • • E2E-тесты на Playwright под критические сценарии Ваших пользователей.
  • • SEO-сопровождение и контент-стратегия.
  • • DevOps: мониторинг, алерты, резервное копирование, hardening.

Приёмка

  • • Перед сдачей проходим согласованный чеклист: отображение на ключевых разрешениях, сценарии загрузки данных, SEO-поля из ТЗ.
  • • При необходимости смотрим отчёты инструментов скорости и разметки — без фиксации числовых порогов в договоре; если Вам важны конкретные цели, закрепляем их отдельно в ТЗ.
  • • Итог приёмки — работающая главная на согласованной среде и передача материалов для Вашей команды.

После согласования условий

Согласуем объём и тариф, затем Вы заполняете веб-бриф: API, доступы, инфраструктура и пожелания по MVP. Мы проверяем контракт и среду и при необходимости уточняем детали перед стартом разработки.

Что приготовить с Вашей стороны

Точный перечень уточним в опроснике после согласования КП; заранее полезно иметь под рукой:

  • OpenAPI/Swagger: ссылка или файл и актуальный эндпоинт списка подборок.
  • Доступ к тестовому или stage API и правила авторизации (если запросы не полностью публичные).
  • Контакт, кто может подтвердить поля DTO, CORS для origin нового фронта и при необходимости выдать ключ/токен.
  • Git-платформа (GitHub/GitLab и т.п.) и доступ к репозиторию — или пожелания, куда мы инициализируем проект.
  • Домен или площадка для деплоя фронта (или заранее оговорённый формат: Docker, VPS, облако).
  • Материалы по виду страниц: скриншоты, макеты, ТЗ или ориентир на текущий UI как на референс.
  • При наличии: логотип, шрифты, базовая палитра — чтобы быстрее совпасть с фирменным стилем.

Наш рекомендуемый старт

Если Вы планируете развивать весь сайт на новом фундаменте, мы чаще всего рекомендуем тариф 2 «Масштабируемая база» — от 95 000 ₽: OpenAPI, ISR, расширенный SEO-пакет, CI и зафиксированные архитектурные решения.

Заполнить брифК тарифам
ez4u.space