Question 1

Яка поведінка за замовчуванням Server Components у Next.js App Router щодо отримання даних?

Accepted Answer

Server Components за замовчуванням виконують отримання даних на сервері при кожному запиті, забезпечуючи завжди актуальні дані. На відміну від Pages Router, де потрібен був getServerSideProps, Server Components роблять SSR неявним. Для статичного кешування необхідно додати опцію cache: 'force-cache' до fetch.

Question 2

Який параметр кешу fetch є еквівалентом getStaticProps у Pages Router?

Accepted Answer

Параметр cache: 'force-cache' вказує Next.js кешувати відповідь до ручного скасування, що еквівалентно getStaticProps. Ця стратегія генерує статичний контент, який залишається кешованим безстроково. Параметр 'no-store' відповідає getServerSideProps (повторне отримання при кожному запиті), тоді як next.revalidate відповідає getStaticProps з revalidate (ISR).

Question 3

Як змусити динамічне отримання даних при кожному запиті (еквівалент getServerSideProps)?

Accepted Answer

Параметр cache: 'no-store' повністю вимикає кешування та примушує повторне отримання при кожному запиті, еквівалентно getServerSideProps. Ця стратегія забезпечує завжди актуальні дані, але збільшує затримку. Використовуйте для даних у реальному часі (дашборди, сповіщення, живі ціни), де актуальність є критичною.

Data Fetching у Next.js

Яка поведінка за замовчуванням Server Components у Next.js App Router щодо отримання даних?

Відповідь

Який параметр кешу fetch є еквівалентом getStaticProps у Pages Router?

Відповідь

Як змусити динамічне отримання даних при кожному запиті (еквівалент getServerSideProps)?

Відповідь

Як реалізувати ISR (Incremental Static Regeneration) з щогодинною реvalidацією?

Що робить export 'export const revalidate = 60' на рівні сторінки?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

TypeScript з React

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Тестування React

Zustand State Management

Оптимізація продуктивності React

Error Boundaries & обробка помилок

Advanced React Patterns

Розширені можливості Next.js

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди