вопросы на собеседовании Next.js

В чём разница между SSR, SSG, ISR и CSR? Когда выбрать каждый?

SSG собирает HTML на этапе деплоя — самый быстрый и дешёвый вариант для контента, который меняется редко. SSR рендерит на каждый запрос и нужен, когда страница зависит от пользователя или от данных, которые обязаны быть актуальными. ISR отдаёт статическую страницу и перегенерирует её в фоне после интервала ревалидации, давая скорость статики при достаточно свежих данных. CSR рендерит в браузере и подходит для дашбордов за логином, где SEO не важно.

Что такое React Server Components и чем они отличаются от клиентских?

Серверные компоненты выполняются только на сервере, поэтому могут напрямую ходить в базу или читать файлы и никогда не отправляют свой код в браузер. Они не умеют использовать состояние, эффекты и браузерные API. Клиентские компоненты — это привычная модель React, и они нужны для интерактивности. Паттерн такой: держать страницы серверными, а "use client" опускать как можно глубже по дереву, чтобы бандл оставался маленьким.

Зачем нужна директива "use client"?

В App Router каждый компонент по умолчанию серверный; "use client" помечает границу, с которой начинается клиентский бандл. Всё, что импортируется ниже этой границы, отправляется в браузер, поэтому директива в начале лейаута случайно делает клиентским всё поддерево. Без неё вызов useState или навешивание onClick падает ещё на сборке.

Как работает кеширование в App Router? Что такое revalidate?

Next кеширует на нескольких уровнях: кеш результатов fetch, полный кеш маршрута для отрендеренного вывода и клиентский кеш роутера для навигаций. revalidate задаёт, сколько кешированная запись считается свежей — либо на конкретный fetch, либо экспортом из сегмента маршрута. Для обновлений по событию вызывают revalidatePath или revalidateTag после мутации, и это точнее, чем временное окно.

Что такое Server Actions и когда их использовать?

Server Action — это асинхронная функция с пометкой "use server", которую клиентский компонент может вызвать напрямую, а Next берёт на себя сериализацию и сетевой поход. Она заменяет написание API-роута для простых мутаций вроде отправки формы и хорошо сочетается с revalidatePath для обновления данных после. Так как под капотом это публичный эндпоинт, валидация входа и проверка прав всё равно обязательны.

Как next/image оптимизирует изображения?

Он генерирует адаптивные варианты в современных форматах вроде WebP и AVIF, отдаёт размер под конкретный вьюпорт, по умолчанию грузит лениво и резервирует место в разметке, чтобы страницу не дёргало. Именно требование явных width и height или пропа fill убирает cumulative layout shift. На практике это обычно самое крупное улучшение Core Web Vitals в приложении на Next.

Что такое streaming и Suspense в Next.js?

Streaming отправляет HTML в браузер порциями по мере готовности, а не ждёт самый медленный источник данных. Обёртка медленного компонента в Suspense с фолбэком позволяет остальной странице отрисоваться сразу, а этому блоку приехать позже. На практике это значит, что медленный виджет рекомендаций больше не задерживает всю страницу, что улучшает воспринимаемую скорость и time to first byte.

Как реализовать динамические метаданные для SEO?

Экспортируйте generateMetadata из страницы или лейаута — функция получает параметры маршрута, может дождаться данных и вернуть title, description, canonical и поля Open Graph. Для статичных страниц достаточно более простого экспорта metadata. Добавьте файл opengraph-image в папку маршрута, и Next автоматически сгенерирует превью-картинку для этого маршрута.