Співбесіда Next.js крутиться навколо стратегій рендерингу, App Router, серверних компонентів і кешування — того, що відрізняє Next від звичайного React. Нижче — найчастіші питання з еталонними відповідями. Junior: базова теорія, визначення та прості практичні кейси.
Серверний рендериться на сервері, свого коду в браузер не надсилає і може читати базу напряму. Клієнтський працює в браузері, і він потрібен для стану, ефектів та обробників подій. Усе є серверним, доки ви не написали 'use client', а ця директива позначає межу: усе, що імпортовано нижче, теж стає клієнтським кодом.
Позначає межу між серверним і клієнтським кодом, а не окремий файл. Поставивши її на початок компонента, ви надсилаєте в браузер і його, і все, що він імпортує. Тому їй місце якомога глибше в дереві: 'use client' у лейауті затягує в бандл усе піддерево.
Pages Router кладе маршрут у файл і вантажить дані через getServerSideProps чи getStaticProps. App Router використовує теки з page.tsx, підтримує вкладені лейаути, що не перемальовуються при навігації, і вантажить дані асинхронними компонентами. Нові проєкти беруть App Router; Pages існує тому, що міграції потребують часу.
page.tsx — власний вміст маршруту. layout.tsx обгортає його і все вкладене і, що важливо, не перемальовується при переходах між дочірніми — тому навігація і бічні панелі живуть саме там. Стан у лейауті переживає перехід, стан у сторінці ні.
Зробити серверний компонент async і дочекатися даних прямо в ньому — без хука, без ефекту, без стану завантаження всередині компонента. Next відмалює його, коли проміс розвʼяжеться. Файл loading.tsx поруч зі сторінкою дає заглушку на цей час.
Link переходить на клієнті, лишає лейаут змонтованим і передзавантажує маршрут, коли той потрапляє в зону видимості. Звичайний <a> перезавантажує сторінку цілком, викидаючи дерево React і весь стан. Використовувати якір для внутрішньої навігації — найшвидший спосіб зробити швидкий застосунок повільним на дотик.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Junior Next.js →