питання на співбесіді 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 автоматично згенерує превʼю-картинку для цього маршруту.