Начало нового проекта React

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

Вот почему.

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

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

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

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

Компонента маршрутизации приложения 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} />;
}

Компонента маршрутизации приложения Next.js также интегрирует получение данных с помощью Suspense. Это позволяет вам задать состояние загрузки (например, шаблон-заглушку) для различных частей вашего пользовательского интерфейса непосредственно в дереве React:

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

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