Архитектура производительности в корпоративных проектах на Next.js 15

В корпоративных проектах о производительности вспоминают после запуска — хотя архитектурные решения первой недели определяют скорость сайта на три года вперёд. Вот рецепт, который делает Lighthouse 95+ нашим стандартом.

Серверные компоненты по умолчанию

React Server Components резко сокращают клиентский JavaScript на страницах с данными. Правило: нет интерактива — нет клиентского кода. Списки товаров, статьи, футер — сервер. Кнопка корзины, поиск, фильтры — клиент. На типовой корпоративной странице это срезает клиентский бандл на 40–60%.

Многослойное кеширование

1. Статическая генерация + ISR

Корпоративные страницы, статьи, карточки товаров: генерация на сборке, ревалидация по расписанию. Посетитель всегда получает скорость CDN.

2. Кеш слоя данных

Меню, настройки, деревья категорий — в памяти или Redis. Каждый лишний поход в базу — тихий соучастник задержки.

3. Персонализированные острова

Кабинет и корзина остаются динамичными; остальная страница уходит статикой. «Полностью динамическая страница» — обычно признание ленивой архитектуры.

Изображения: тихий убийца

Формат-цепочка AVIF → WebP → JPEG
Адаптивные размеры — не отдавайте телефону картинку в 4000px
priority для LCP-изображения, lazy для остальных
Ширина/высота везде — против сдвигов макета

Укрощение сторонних скриптов

Каждый пиксель и виджет «всего 30 КБ» — вместе они блокируют главный поток. Грузите через afterInteractive, проводите квартальную ревизию, переходите на серверный тегинг.

Измеряйте в поле, а не в лаборатории

Lighthouse — лабораторные данные; правда живёт в полевых (CrUX, RUM). Связь с SEO — в нашем техническом гайде.

Производительность — не фича, а архитектурная привычка. Хотите такую архитектуру в своём проекте? Напишите нам.