01Аудит

Аудит переходов между страницами

Next.js Router-переходы: loading-state, scroll-position, layout preservation, prefetch, stale UI. Чтобы не было «прыжков» и «двух картинок одновременно».

Между «работает» и «работает ровно» — переходы. Если пользователь видит вспышку белого, прыжок скролла, дубль heading'а или «загрузка» которая длится 3 секунды для статической страницы — это перепонимание архитектуры роутинга.

Site: {{site_url}} Стек: {{stack}}

1. Что аудитим (8 классов)

Класс	Симптом	Причина
Layout shift	Hero прыгает на ~100px при переходе	разные layout.tsx / разный padding
Scroll jump	Скролл сбрасывается в начало без причины	scroll restoration broken
Flash of old content	Видишь предыдущую страницу 200ms после клика	sync nav без loading.tsx
Flash of empty	Белый screen на 1-2 сек	client-only fetch без skeleton
Stale data	Список не обновляется после mutation	cache не инвалидирован
Two-headers / two-screens	На секунду видишь два header'а	layout transitions неверны
Prefetch waste	Каждая ссылка тянет full bundle	prefetch="false" не выставлен
History hell	Back button не возвращает на ту же позицию	scroll restore broken

2. Проход (15-20 переходов)

Открой prod в обычном Chrome. DevTools → Performance recording + Network (Slow 3G throttle для драматичности).

Сценарии:

Home → details page → back — должен вернуть на тот же скролл
Home → details → details (другой) → home — promises не накладываются
Search → результат → details → back to search — search state preserved?
Login → dashboard → settings → logout — clean state transitions
404 page → back — куда вернёт?
Open detail в новой вкладке → close → переход в той же session — state совпадает?

Для каждого:

Visible flash (yes/no, ms)
Scroll position right (yes/no)
Layout shift (Performance panel CLS metric)
Network: cancelled requests count (>2 = bad)

3. Next.js App Router specifics

loading.tsx

Должен существовать для каждого async сегмента
Skeleton matched layout (height matched, no shift)
НЕ ставь loading.tsx в корень — будет показываться при каждой навигации

error.tsx

Должен быть для каждой группы с async data
Понятная ошибка, не stacktrace
Reset-кнопка работает (тест: throw в loader, нажать reset)

Suspense boundaries

Нужны для streaming SSR
Не слишком близко к root (всё ждёт) и не слишком глубоко

prefetch

<Link prefetch> default true в prod
Если 1000 ссылок на странице — prefetch={false} для большинства
Иначе тянешь 1000 chunks при scroll

parallel / intercepting routes

@modal закрытие через router.back() работает?
Refresh при открытом @modal — что показывает?

4. SPA specifics (не Next.js)

history.scrollRestoration: 'manual' или 'auto'?
React Router <ScrollRestoration /> v6+ работает?
HMR / dev mode маскирует production-баги transitions

5. Performance budgets

Metric	Good	Bad
Transition response (click → first paint)	<100ms	>300ms
LCP после nav	<2s	>4s
CLS during transition	<0.1	>0.25
Cancelled requests	0-1	3+

6. Что починить (приоритет)

Любой flash >200ms — loading.tsx или skeleton
CLS >0.1 — фиксированные размеры placeholder
Scroll prevention — router.push(url, { scroll: false }) где надо сохранить позицию
Stale cache после mutation — router.refresh() или explicit revalidation
prefetch overkill — prefetch={false} для низкоприоритетных

Anti-patterns

❌ Каждое <Link> с prefetch={true} на странице с 200 ссылок — bandwidth burn
❌ window.location.href = url вместо router-push — full reload
❌ Loading-state как пустая страница (white screen) — для пользователя «сломалось»
❌ Skeleton не matched layout → CLS spike
❌ Не тестировать back button
❌ Browser cache не использован — каждый back повторно fetch'ит
❌ History hell: после клика и back возвращается на /home вместо предыдущего фильтра