Фронтенд и бэкенд: в чём разница?
Фронтенд — это часть приложения, которая работает в браузере пользователя: страницы, кнопки, формы и анимации, которые он видит и на которые кликает. Бэкенд — это часть, которая работает на сервере, невидимом для пользователя: он хранит и извлекает данные, применяет бизнес-правила, проверяет, кому что разрешено, и взаимодействует с другими сервисами, например платёжными системами и электронной почтой. Две части общаются через API, и вместе с базой данных они образуют «full-stack» приложение.
Почему это важно, когда вы создаёте приложение с ИИ
Когда вы описываете приложение ИИ-конструктору, вы описываете сразу обе части, даже если не замечаете этого. Фраза «клиенты могут забронировать время» подразумевает форму бронирования (фронтенд), правила о том, какие слоты свободны (бэкенд), и место, где сохраняются брони (база данных).
Понимание этого разделения помогает на практике в трёх случаях:
- Безопасность. Всё, что находится во фронтенде, пользователь может увидеть и изменить. Правила и секреты должны храниться в бэкенде.
- Отладка. «Кнопка не реагирует» и «кнопка реагирует, но ничего не сохраняется» указывают на разные части приложения. Если вы точно скажете, что видите, ИИ быстрее найдёт причину.
- Хостинг и стоимость. Сайт только с фронтендом дёшев и прост в размещении. Бэкенд должен где-то работать, и это влияет на то, сколько вы платите и как приложение ведёт себя в простое.
Бытовая аналогия
Представьте ресторан.
Фронтенд — это зал: меню, столики, интерьер, официант, который принимает заказ. Он создан для гостей, и они видят и трогают всё, что там есть.
Бэкенд — это кухня и офис: повара, склад, касса и правила менеджера о том, кому положена скидка. Гости туда не заходят и не должны иметь доступа.
API — это окно между ними: стойка, куда поступают заказы и откуда выдаются блюда, в согласованном формате. База данных — это склад и книга заказов.
Гость может переписать свой заказ на бланке (фронтенд находится под его контролем), но кухня всё равно решает, что готовить и сколько это стоит. Поэтому важные проверки должны находиться в глубине, на стороне бэкенда.
Что делает каждая сторона
| Фронтенд | Бэкенд | |
|---|---|---|
| Где работает | На устройстве пользователя, в браузере | На сервере, которым вы (или ваш хостинг) управляете |
| Основная задача | Показывать информацию, принимать ввод, реагировать на клики | Хранить данные, применять правила, контролировать права, вызывать другие сервисы |
| Может ли пользователь увидеть и изменить код? | Да — он загружается в браузер пользователя | Нет |
| Может ли хранить секретные ключи API? | Нет | Да, в переменных окружения |
| Распространённые технологии | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Что обычно ломается | Вёрстка едет на телефоне, кнопка ничего не делает, медленная страница | Данные не сохраняются, показываются неверные данные, ошибки, дыры в безопасности |
Некоторые фреймворки стирают границу. Например, Next.js позволяет держать в одном проекте и код для браузера, и код для сервера. Суть остаётся прежней: всегда важно понять, где выполняется этот фрагмент.
Пример: бронирование занятия
Вот что происходит, когда кто-то записывается на занятие йогой, шаг за шагом.
| Шаг | Где | Что происходит |
|---|---|---|
| 1 | Фронтенд | Страница расписания загружается и запрашивает у бэкенда занятия на эту неделю. |
| 2 | Бэкенд | Читает занятия и брони из базы данных, считает свободные места и возвращает список в формате JSON. |
| 3 | Фронтенд | Показывает каждое занятие с временем, преподавателем и количеством свободных мест. |
| 4 | Фронтенд | Пользователь выбирает занятие и вводит имя и email. Форма проверяет, похож ли email на правильный (это для удобства, а не гарантия). |
| 5 | Фронтенд → Бэкенд | Отправляет запрос POST /api/bookings через API. |
| 6 | Бэкенд | Повторно проверяет данные, убеждается, что занятие не заполнено, сохраняет бронь и с помощью секретного ключа просит сервис рассылки отправить подтверждение. |
| 7 | Бэкенд → Фронтенд | Возвращает «забронировано» или «извините, мест нет». |
| 8 | Фронтенд | Показывает экран подтверждения. |
Обратите внимание на шаги 4 и 6: данные проверяются дважды. Проверка на фронтенде даёт мгновенную обратную связь; проверка на бэкенде — та, которая действительно важна, потому что настойчивый пользователь может обойти фронтенд полностью.
Основные термины
| Термин | Значение |
|---|---|
| Клиент / сервер | Клиент — это браузер (или приложение), который делает запросы; сервер на них отвечает. |
| UI | Пользовательский интерфейс — экраны и элементы управления. |
| API | Согласованный способ, которым фронтенд запрашивает у бэкенда данные или действия. |
| Endpoint | Один конкретный адрес API, например /api/bookings. |
| Full stack | Фронтенд + бэкенд + база данных вместе. См. что такое full-stack приложение. |
| Статический сайт | Фронтенд без собственного бэкенда; для всех одни и те же файлы. |
| SPA | Одностраничное приложение: фронтенд, который обновляет страницу в браузере, не загружая новые. |
| Серверный рендеринг (SSR) | Сервер формирует HTML страницы до отправки, что может ускорять загрузку и помогать SEO. |
| Переменные окружения | Настройки и секреты, которые передаются бэкенду во время работы и хранятся вне кода. |
Нужен ли вашему приложению бэкенд?
| Если ваше приложение… | Нужен ли бэкенд? |
|---|---|
| Показывает информацию, одинаковую для всех | Нет |
| Содержит контактную форму, которая только отправляет письмо вам | Обычно небольшой, или сервис форм |
| Сохраняет данные, которые увидят другие люди | Да |
| Требует входа и содержит личные данные | Да |
| Принимает платежи | Да — хотя бы для создания оплаты и приёма вебхуков платежей |
| Использует платный ИИ или другой API с секретным ключом | Да, чтобы ключ не попадал в браузер |
Частые ошибки и заблуждения
- Секретные ключи во фронтенде. Их увидит любой, кто откроет инструменты разработчика в браузере. Это самая распространённая серьёзная ошибка в приложениях, созданных с ИИ.
- Правила только во фронтенде. Скрыть кнопку «удалить» для не-администраторов — это не защита; бэкенд обязан отклонять такой запрос.
- Считать бэкенд «просто базой данных». База хранит данные. Бэкенд решает, кто может их читать и менять и как.
- Думать, что JavaScript — это фронтенд. JavaScript и TypeScript работают и на серверах, с Node.js.
- Искать проблему не в той части. Если страница выглядит правильно, а данные неверны, проблема обычно в бэкенде или базе, а не в дизайне.
- Переусложнять. Портфолио не нужен собственный бэкенд. Он добавляет стоимость и движущиеся части.
Что просить у ИИ-конструктора
- «Какие части этого приложения работают в браузере, а какие на сервере?»
- «Перенеси все ключи API в бэкенд и читай их из переменных окружения.»
- «Проверяй каждую форму на сервере, а не только в браузере.»
- «Сделай так, чтобы на бэкенде удалять брони мог только администратор.»
- «Страница выглядит нормально, но данные не сохраняются — проверь в логах бэкенда запрос.»
- «Это простой маркетинговый сайт; оставь его только фронтендом, пока не понадобится бэкенд.»
Фронтенд и бэкенд в Mythex
Новый проект в Mythex стартует с фронтенда на Vite, React, TypeScript и Tailwind, а агент добавляет бэкенд, когда приложению он нужен. Можно также попросить отдельный API на Node, Python (FastAPI), C# или Java, работающий рядом с фронтендом в том же проекте. В предпросмотре можно переключаться между сайтом и API-сервером, а при публикации разворачиваются обе части, при необходимости с базой данных и файловым хранилищем. В документации описаны многосервисные приложения, руководство по веб-хостингу объясняет, где работает каждая половина после запуска, а шаблоны приложений — быстрый способ увидеть примеры full-stack приложений.
Вопросы
В чём разница между фронтендом и бэкендом?
Фронтенд — это часть приложения, которая работает в браузере пользователя: страницы, кнопки и формы, которые он видит и на которые нажимает. Бэкенд работает на сервере, который пользователь никогда не видит: он хранит данные, применяет бизнес-правила, проверяет права доступа и взаимодействует с другими сервисами.
Нужен ли бэкенд каждому приложению?
Нет. Маркетинговый сайт, портфолио или простой лендинг может обойтись только фронтендом. Как только приложению нужно сохранять общие данные, авторизовать пользователей, принимать платежи или использовать секретные ключи API, без бэкенда какого-то вида не обойтись.
HTML — это фронтенд или бэкенд?
HTML, CSS и JavaScript, которые работают в браузере, относятся к фронтенду. JavaScript может работать и на сервере с помощью Node.js, и тогда это уже бэкенд. Решает не язык, а то, где выполняется код.
Что значит full stack?
Full stack означает, что человек или проект охватывает и фронтенд, и бэкенд (обычно и базу данных). Full-stack приложение состоит из всех трёх частей, а full-stack разработчик работает со всеми ними.