← Все статьи

Next.js почти мгновенно: практический чеклист по App Router

Server Components по умолчанию, меньше client JS, next/image, без CLS, кеширование, next/script и замеры на throttled mobile.

Теги
НовостиfrontendПроизводительность
Содержание

Коротко

На Dev.to опубликовали практический чеклист, как ускорить сайты на Next.js App Router: меньше JavaScript на клиенте, стабильная вёрстка без CLS, оптимизация изображений, серверный рендер с кешем и замеры на throttled mobile, а не на dev-ноутбуке. Автор связывает скорость с конверсией и Core Web Vitals как ranking-сигналом Google.

Что произошло

Статья идёт от самого «тяжёлого» рычага к инфраструктурным привычкам.

1. Меньше JS на клиенте. Большинство «медленных React-сайтов» — это гидратация сотен килобайт JS, которые пользователю не нужны. Рецепт: Server Components по умолчанию, 'use client' только там, где нужны state и browser API, и опускать client boundary вниз по дереву, а не поднимать на всю страницу. Тяжёлые блоки (charts, 3D, modals) — через next/dynamic с ssr: false.

2. Предотвращение CLS. Явные width/height у next/image (или fill + контейнер с размером), резерв места под async-контент, шрифты через next/font с display: 'swap'.

3. Изображения как главный вес страницы. next/image даёт AVIF/WebP, sizing и lazy load; hero — с priority, остальное — lazy; не отдавать 4000px фото в слот 400px.

4. SSR и кеш. Static/ISR для всего, что не персонализировано per-request; fetch caching и revalidate; third-party через next/script с strategy="lazyOnload".

5. Замеры. Lighthouse в mobile mode с CPU throttling; field data в Search Console (CrUX). Опционально — performance budget в CI (например, < 150 KB JS на first load).

Почему это важно

Чеклист не про «экзотику», а про последовательное выполнение скучных правил App Router. Server Components — не опция, а default: каждый лишний 'use client' на layout тянет весь поддерево в bundle.

Core Web Vitals напрямую влияют на SEO и bounce rate; локальные замеры на MacBook с fiber систематически завышают результат. Throttled mobile + CrUX ближе к тому, что видит Google и реальные пользователи.

Performance budget в CI ловит «медленное ползучее ухудшение» на этапе PR — дешевле, чем расследовать просадку конверсии после релиза.

На практике

Пройдите чеклист перед продакшен-релизом Next.js:

  1. Аудит 'use client': можно ли компонент оставить server-only?
  2. Hero и above-the-fold — без lazy; below-the-fold charts — dynamic(..., { ssr: false }).
  3. Все <Image> с размерами; шрифты — только через next/font.
  4. Страницы каталога/блога — static или ISR; персонализацию не смешивать с public cache без необходимости.
  5. Analytics/chat widgets — lazyOnload, не блокировать main thread.
  6. Lighthouse mobile + проверка CrUX; при росте JS — fail build по budget.

Если сайт «кажется быстрым» только у вас — перепроверьте на Slow 4G и mid-tier Android.

Итог

Мгновенная загрузка Next.js — это App Router done right: server-first, минимальный client JS, дисциплина с медиа и кешем, честные метрики. Чеклист с Dev.to удобен как runbook перед каждым крупным релизом фронтенда.