Співбесіда Next.js крутиться навколо стратегій рендерингу, App Router, серверних компонентів і кешування — того, що відрізняє Next від звичайного React. Нижче — найчастіші питання з еталонними відповідями. Middle: глибше розуміння, оптимізацію та реальні робочі ситуації.
Серверні компоненти виконуються лише на сервері, тому можуть напряму ходити в базу або читати файли і ніколи не надсилають свій код у браузер. Вони не вміють використовувати стан, ефекти та браузерні API. Клієнтські компоненти — це звична модель React, і вони потрібні для інтерактивності. Патерн такий: тримати сторінки серверними, а "use client" опускати якомога глибше по дереву, щоб бандл лишався маленьким.
В App Router кожен компонент за замовчуванням серверний; "use client" позначає межу, з якої починається клієнтський бандл. Усе, що імпортується нижче цієї межі, надсилається в браузер, тому директива на початку лейауту випадково робить клієнтським усе піддерево. Без неї виклик useState або навішування onClick падає ще на збірці.
Next кешує на кількох рівнях: кеш результатів fetch, повний кеш маршруту для відрендереного виводу і клієнтський кеш роутера для навігацій. revalidate задає, скільки кешований запис вважається свіжим — або на конкретний fetch, або експортом із сегмента маршруту. Для оновлень за подією викликають revalidatePath або revalidateTag після мутації, і це точніше, ніж часове вікно.
Server Action — це асинхронна функція з позначкою "use server", яку клієнтський компонент може викликати напряму, а Next бере на себе серіалізацію та мережевий похід. Вона замінює написання API-роута для простих мутацій на кшталт надсилання форми і добре поєднується з revalidatePath для оновлення даних після. Оскільки під капотом це публічний ендпоінт, валідація входу й перевірка прав усе одно обовʼязкові.
Він генерує адаптивні варіанти в сучасних форматах на кшталт WebP і AVIF, віддає розмір під конкретний вьюпорт, за замовчуванням вантажить ліниво і резервує місце в розмітці, щоб сторінку не смикало. Саме вимога явних width і height або пропа fill прибирає cumulative layout shift. На практиці це зазвичай найбільше покращення Core Web Vitals у застосунку на Next.
Streaming надсилає HTML у браузер порціями в міру готовності, а не чекає найповільніше джерело даних. Обгортка повільного компонента в Suspense з фолбеком дозволяє решті сторінки відмалюватися одразу, а цьому блоку приїхати пізніше. На практиці це означає, що повільний віджет рекомендацій більше не затримує всю сторінку, що покращує сприйману швидкість і time to first byte.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Middle Next.js →