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

Вы определённо можете использовать React без фреймворка — именно так вы бы использовали React для части вашей существующей страницы. Однако, если вы создаёте новое приложение или сайт полностью с React, мы рекомендуем использовать фреймворк.

Вот почему.

Даже если вам вначале не нужна маршрутизация или загрузка данных, вы, вероятно, захотите добавить некоторые библиотеки для них. По мере роста вашего JavaScript-пакета с каждой новой функцией, вам, возможно, придется разобраться, как разбить код для каждого маршрута по отдельности. По мере усложнения ваших потребностей в загрузке данных, вы, вероятно, столкнетесь с водопадами сетевых взаимодействий клиент-сервер, которые заставят ваше приложение работать очень медленно. По мере увеличения аудитории пользователей с плохим подключением к сети и устаревшими устройствами, вам может потребоваться генерировать HTML из ваших компонентов для отображения контента на ранней стадии — либо на сервере, либо во время сборки. Изменение вашей настройки для запуска части вашего кода на сервере или во время сборки может быть очень сложным.

Эти проблемы не специфичны для React. Вот почему у Svelte есть SvelteKit, у Vue — Nuxt и так далее. Чтобы самостоятельно решить эти проблемы, вам нужно будет интегрировать ваш сборщик с вашим маршрутизатором и с вашей библиотекой загрузки данных. Несложно создать начальную настройку, но существует множество нюансов, связанных с созданием приложения, которое загружается быстро даже по мере его роста. Вам нужно будет отправлять минимальный объём кода приложения, но делать это за один обмен между клиентом и сервером, параллельно с любыми необходимыми для страницы данными. Вероятно, вам потребуется, чтобы страница была интерактивной до того, как будет запущен ваш JavaScript-код, чтобы поддерживать поэтапное улучшение. Возможно, вы захотите сгенерировать папку с полными статическими HTML-файлами для ваших маркетинговых страниц, которые можно разместить где угодно, и они всё равно будут работать с отключённым JavaScript. Создание этих возможностей самостоятельно требует реальных усилий.

React-фреймворки на этой странице решают подобные проблемы по умолчанию, без дополнительных усилий с вашей стороны. Они позволяют начать с минимальными ресурсами и затем масштабировать ваше приложение в соответствии с вашими потребностями. Каждый React-фреймворк имеет сообщество, поэтому найти ответы на вопросы и обновить инструменты проще. Фреймворки также придают структуру вашему коду, помогая вам и другим сохранять контекст и навыки между различными проектами. И наоборот, с пользовательской настройкой проще застрять на недоступных версиях зависимостей, и вы по сути создадите свой собственный фреймворк — без сообщества или пути обновления (и, если он будет похож на те, которые мы делали в прошлом, он будет разработан более хаотично).

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

Бендер 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>

Server Components и Suspense — это функции React, а не Next.js. Однако их принятие на уровне фреймворка требует согласия и непростой работы по реализации. В настоящее время App Router в Next.js является наиболее полной реализацией. Команда React работает с разработчиками бендеров, чтобы сделать эти функции более простыми в реализации в следующем поколении фреймворков.