Співбесіда Next.js крутиться навколо стратегій рендерингу, App Router, серверних компонентів і кешування — того, що відрізняє Next від звичайного React. Нижче — найчастіші питання з еталонними відповідями. Middle: глибше розуміння, оптимізацію та реальні робочі ситуації.
Шарів кілька: мемоїзація запиту всередині одного відмальовування, кеш даних між запитами і повний кеш маршруту для статичних. Дивує те, як багато кешується за замовчуванням: fetch кешується, доки ви не скажете інакше, і сторінка показує застарілі дані, хоча ніхто нічого не міняв. Відмовляються через revalidate і cache: 'no-store'.
Функція, позначена 'use server', яку клієнтський компонент викликає напряму, а запит організовує Next. Годиться для мутацій із форми без написання API-роуту і вміє одразу скинути зачеплений кеш. Чим він не є — так це загальним RPC: під капотом це POST, тому для того, що має бути GET, він не пасує.
revalidatePath скидає кеш маршруту; revalidateTag скидає всі fetch із цим тегом, де б вони не використовувалися. Теги зручніші, щойно ті самі дані зʼявляються на кількох сторінках: перестаєш памʼятати, які маршрути треба скинути при зміні.
Сервер надсилає HTML у міру готовності, а не чекає найповільніший запит. Обгортка повільної частини в Suspense із заглушкою дозволяє решті сторінки прийти одразу, а повільному шматку дострімитися пізніше. Виграш реальний для сторінки з одним повільним віджетом і зникає, якщо все загорнуто в одну межу.
Усе з префіксом NEXT_PUBLIC_ підставляється в браузерний бандл і тому публічне: ключ там — це опублікований ключ. Решта доступна лише на сервері — у серверних компонентах, обробниках маршрутів і діях. Помилка — дописати префікс, щоб полагодити undefined у клієнтському компоненті, і тихо надіслати секрет назовні.
Повідомляє Next, які значення динамічного маршруту відмалювати на етапі збірки, перетворюючи [slug] на набір статичних сторінок. Усе, чого немає в списку, рендериться на вимогу і далі може кешуватися. Саме це робить контентний сайт статичним, не відмовляючись від динамічної маршрутизації.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Middle Next.js →