Junior Next.js — вопросы на собеседовании 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.