Почати новий проект React

Чи можна використовувати React без фреймворку?

Ви, безумовно, можете використовувати React без фреймворку - саме так ви використовуєте React для частини вашої сторінки. Втім, якщо ви створюєте новий застосунок або сайт повністю з React, ми рекомендуємо використовувати фреймворк.

Ось чому.

Навіть якщо спочатку вам не знадобиться маршрутизація або отримання даних, ви, ймовірно, захочете додати деякі бібліотеки для них. У міру того, як ваш пакет JavaScript зростатиме з кожною новою функцією, вам, можливо, доведеться з'ясувати, як розділити код для кожного маршруту окремо. У міру того, як ваші потреби в отриманні даних стають складнішими, ви, ймовірно, зіткнетеся з мережевими водоспадами між сервером і клієнтом, які змусять ваш застосунок працювати дуже повільно. Оскільки ваша аудиторія включає більше користувачів з поганими мережевими умовами і низькоякісними пристроями, вам може знадобитися генерувати HTML з ваших компонентів для відображення контенту на початку - або на сервері, або під час збірки. Зміна налаштувань для запуску частини коду на сервері або під час збірки може бути дуже складною.

Ці проблеми не є специфічними для React. Ось чому Svelte має SvelteKit, Vue має Nuxt і т.д. Щоб вирішити ці проблеми самостійно, вам потрібно інтегрувати ваш бандлер з вашим маршрутизатором та бібліотекою збору даних. Зробити початкове налаштування не складно, але є багато тонкощів, пов'язаних зі створенням програми, яка швидко завантажується, навіть якщо вона зростає з часом. Вам потрібно відправити мінімальну кількість коду програми, але зробити це за один обхід клієнт-сервер, паралельно з усіма даними, необхідними для сторінки. Швидше за все, ви захочете, щоб сторінка була інтерактивною ще до того, як ваш JavaScript-код буде запущено, щоб підтримувати поступове вдосконалення. Можливо, ви захочете створити папку з повністю статичними HTML-файлами для ваших маркетингових сторінок, які можна розмістити де завгодно і які працюватимуть з вимкненим JavaScript. Самостійне створення цих можливостей вимагає справжньої роботи.

Фреймворки React на цій сторінці вирішують подібні проблеми за замовчуванням, без додаткової роботи з вашого боку. Вони дозволяють вам почати дуже економно, а потім масштабувати ваш застосунок відповідно до ваших потреб. Кожен фреймворк React має спільноту, тому знайти відповіді на питання та оновити інструментарій простіше. Фреймворки також надають структуру вашому коду, допомагаючи вам та іншим зберігати контекст і навички між різними проектами. І навпаки, при індивідуальному налаштуванні легше застрягти на непідтримуваних версіях залежностей, і ви, по суті, створите власний фреймворк - хоча і без спільноти та можливості оновлення (і якщо він буде схожий на ті, що ми робили в минулому, він буде більш безсистемним).

Якщо ви все ще не переконані, або ваша програма має незвичні обмеження, з якими ці фреймворки не можуть впоратися, і ви хочете застосувати власну настройку, ми не можемо вас зупинити - дійте! Візьміть react та react-dom з npm, налаштуйте свій власний процес збірки за допомогою бандлера на кшталт Vite або Parcel та додайте інші інструменти, які вам потрібні для маршрутизації, статичної генерації, рендерингу на стороні сервера та ін.

Які особливості складають бачення команди React щодо архітектури повного стеку?

Бандлер App Router Next.js повністю реалізує офіційну специфікацію React Server Components. Це дозволяє вам змішувати компоненти часу збірки, серверні та інтерактивні компоненти в одному дереві React.

Наприклад, ви можете написати серверний React-компонент як функцію async, яка читає дані з бази даних або з файлу. Потім ви можете передавати дані з неї до ваших інтерактивних компонентів:

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

App Router у Next.js також інтегрує отримання даних з Suspense. Це дозволяє вам вказати стан завантаження (як заповнювач скелету) для різних частин вашого користувацького інтерфейсу безпосередньо у вашому React-дереві:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Серверні компоненти та Suspense є функціями React, а не Next.js. Однак їх впровадження на рівні фреймворку вимагає підтримки та нетривіальної роботи з реалізації. На даний момент найбільш повною реалізацією є Next.js App Router. Команда React працює з розробниками бандлерів, щоб полегшити реалізацію цих функцій у наступному поколінні фреймворків.