Блок 4 · Фронтенд-слой

React, Next.js и Vite — это не «или-или»

Три инструмента отвечают на три разных вопроса. Поэтому их чаще используют вместе, чем вместо друг друга. Разберёмся — и «React или Vite?» перестанет быть загадкой.

⏱ ≈ 7 минут 🎯 одна идея 🧭 цель: грамотный заказчик

Зачем это вам

Когда агент пишет «соберу SPA на Vite + React» или «давайте на Next.js», он принимает конкретное архитектурное решение. После этого урока вы будете слышать в этих фразах смысл — и сможете направить выбор, а не просто кивнуть.

Главная идея

Три инструмента — три разных вопроса

Путаница в том, что React, Vite и Next.js кажутся тремя вариантами одного выбора. На самом деле каждый отвечает на свой вопрос — и они стоят на разных «этажах» приложения.

React

«Из чего я собираю интерфейс?»

Этобиблиотека для интерфейса
ДелаетПозволяет собирать экран из переиспользуемых кубиков — компонентов (кнопка, форма, карточка товара).
Вместо неёVue, Svelte, Angular.

Vite

«Что превращает мой код в работающий сайт?»

Этосборщик + dev-сервер
ДелаетБерёт ваши файлы, собирает в то, что понимает браузер, и пока вы работаете — мгновенно показывает изменения.3
Вместо негоwebpack, Parcel, Rsbuild, Turbopack.

Библиотека — готовый набор кубиков, которые вы зовёте сами, когда нужно.

Фреймворк — каркас, который задаёт структуру и сам зовёт ваш код в нужные моменты. («Не звоните нам — мы позвоним вам».)

Сборщик — превращает исходные файлы в то, что реально грузит браузер.

Dev-сервер — локальный сервер для разработки: открываете сайт у себя и видите правки сразу.

Аналогия

Кухня

  • 🍳 React — это рецепты и техника готовки: как из ингредиентов вы собираете блюда (интерфейсы из компонентов).
  • 🔥 Vite — это плита и кухонная техника: превращает ингредиенты в готовое блюдо и, пока готовите, даёт мгновенно пробовать.
  • 🏪 Next.js — это ресторан под ключ: в нём уже есть и кухня с плитой (свой встроенный сборщик), и зал, и меню, и официанты (маршруты и сервер). Готовят там по тем же рецептам React.

Отсюда сразу следствие: внутри Next.js уже есть своя «плита», поэтому Vite вы с ним отдельно не выбираете.

Три связи, которые всё расставляют по местам

Вот это и есть «ага»

  1. React сам по себе не запускается — ему нужен сборщик. Vite — самый популярный выбор. Поэтому «React + Vite» — это нормальная пара, а не конфликт.1,2
  2. Next.js — это надстройка над React со своим встроенным сборщиком. С Next.js вы Vite отдельно не подключаете.
  3. Значит, разбираемся в вопросах: ✓ «React или Next.js?» — осмысленно: библиотека против целого фреймворка. ✗ «React или Vite?» — бессмысленно: это разные слои, они работают вместе. ➤ «Vite или Next.js?» — на практике это и есть ваш главный выбор: «лёгкое приложение из кубиков» против «фреймворк под ключ».

Что это даёт на практике

Фраза агента → что он имеет в виду

Теперь те же фразы читаются как смысл, а не как магия:

«Соберу SPA на Vite + React»
Лёгкое приложение, целиком работает в браузере, без своего сервера. Часто для: внутренних инструментов, дашбордов, прототипов, игр.
«Давайте на Next.js»
Полноценный фреймворк: маршруты + серверная часть + оптимизации. Часто для: публичных сайтов, где важны SEO и быстрая первая загрузка, и где нужна серверная логика.
«Через create-react-app»
⚠ Устаревший способ — React официально свернул его в 2025-м.5 Стоит переспросить: почему не Vite или Next.js?

SPA (Single-Page Application) — одностраничное приложение: браузер подгружает данные на лету, не перезагружая страницу целиком.

SEO — насколько хорошо поисковики (Google) видят и индексируют ваши страницы.

📌 Когда что выбирать — отдельный урок дальше в блоке 4 (дерево решений). Пока цель скромнее: слышать разницу.

Проверьте себя

Четыре вопроса с мгновенной обратной связью

Нажмите вариант — сразу увидите, верно ли, и почему.

1. Агент спрашивает: «React или Vite — что берём?» Лучший ответ:

2. Нужен публичный лендинг, который должен хорошо индексироваться в Google. Что скорее уместно?

3. Использует ли Next.js React внутри?

4. Делаете приложение на Next.js. Нужно ли отдельно выбирать Vite как сборщик?

Куда мы идём

Программа курса — 7 блоков

Этот урок — забегание вперёд, в блок 4. Вот как он встроен в общий маршрут: