Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим Next.js відрізняється від React у плані отримання даних?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**React** сам по собі не дає «вбудованих» способів data fetching на рівні фреймворка, тоді як **Next.js** додає серверний рівень і правила, коли і де можна отримувати дані. **Ключове:** Next.js дає серверний рендеринг, статичну генерацію, оновлення статики, Server Components і API-роути, тобто керує тим, коли/де вантажаться, кешуються й оновлюються дані.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняReact і Next.js - це про різні рівні застосунку, і через це підхід до отримання даних сильно відрізняється. ## Що є в React **React сам по собі не дає «вбудованих» способів data fetching на рівні фреймворка.** Це бібліотека для UI, тому зазвичай дані отримують так: - запити в браузері: `fetch/axios` в `useEffect` - бібліотеки для запитів і кешу: `SWR`, `React Query` - стан завантаження/помилок обробляєш вручну (або через ці бібліотеки) - якщо потрібен серверний рендеринг чи статична генерація - це вже окрема інфраструктура (наприклад, налаштувати SSR самому через Node/Express тощо) **Підсумок у React:** найчастіше дані вантажаться *після* першого рендеру в браузері, а питання SEO, SSR/SSG, кешування «на сервері» React не вирішує з коробки. --- ## Що додає Next.js поверх React Next.js - це фреймворк навколо React, який додає **серверний рівень** і правила, *коли і де* можна отримувати дані. ### 1) Можна отримувати дані **на сервері**, а не лише в браузері У Next.js можна завантажити дані: - **на сервері при запиті** (сторінка вже приходить користувачу з даними) - **під час збірки** (сторінка статична) - **з періодичним оновленням** (ISR) - **у Server Components** (в App Router - прямо в компоненті) Це змінює UX і SEO: користувач отримує HTML вже з даними, а не «порожню сторінку + спінер, поки useEffect сходив в API». --- ### 2) Є вбудовані стратегії: SSR / SSG / ISR У чистому React ти обираєш лише «клієнтські запити» (якщо не будуєш SSR сам). У Next.js ти обираєш стратегію під дані: - **SSR** - завжди свіжі дані - **SSG** - максимальна швидкість (дані на build) - **ISR** - баланс (статика + оновлення) - **Client fetching** - коли потрібно Це не просто «де написати fetch», а «як працюватиме сторінка загалом». --- ### 3) Кеш і revalidation - частина платформи У Next.js (особливо App Router) є **вбудована логіка кешування запитів** і механізм «онови дані» (revalidate) на рівні сервера/рендеру. У React кешування зазвичай вирішують: - вручну (стан + ефекти) - через SWR/React Query - через зовнішні CDN/проксі, але це вже інфраструктура --- ### 4) Можна ховати секрети і ходити в БД безпечно У React, якщо ти робиш запити з браузера, то: - ключі API не можна зберігати в коді - прямий доступ до бази даних неможливий (і небезпечний) - часто потрібен окремий backend У Next.js можна: - робити запити **на сервері** (Server Components/SSR/Route Handlers) - використовувати приватні ключі та доступ до бази, не надсилаючи це на клієнт - робити **API routes / Route Handlers** прямо в проекті --- ### 5) Менше «рухів» на клієнті - менше JS у браузері Якщо дані завантажуються на сервері, то: - менше коду йде в бандл - швидший перший meaningful render - іноді можна обійтися без useEffect взагалі У чистому React часто все зав'язано на клієнтський рендер і подальші запити. --- ## Простий приклад «відчуття різниці» **React (типово):** 1. браузер отримує порожнюватий UI 2. `useEffect` робить запит 3. показуємо loader -> потім дані **Next.js (серверний варіант):** 1. сервер робить запит 2. браузер отримує HTML вже з даними 3. loader може взагалі не знадобитися (або буде мінімальним) --- ## Коротке резюме - **React**: отримання даних найчастіше на клієнті; SSR/SSG/ISR не вбудовані, потрібні зовнішні рішення. - **Next.js**: дає серверний рендеринг, статичну генерацію, оновлення статики, Server Components та API-роути, тобто керує тим, **коли/де** вантажаться дані, кешуються й оновлюються.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.