Фронтенд и бэкенд — итоги

НЕ ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Всем

Кратко — что стоит унести из раздела "Фронтенд и бэкенд". Если пункт кажется туманным — откройте указанную главу или оглавление.

FAQ — Часто задаваемые вопросы

Типичные затыки при разработке и отладке веб-приложений — "почему у меня не работает".

Вопрос. На localhost всё ок, на сервере белый экран — с чего начать?

Ответ. Откройте консоль браузера и Network на проде — часто 404 на bundle.js или неверный base path. Проверьте, что статика задеплоена и пути совпадают с конфигом сборки. Подробнее здесь — типы веб-приложений.

Вопрос. В консоли Access-Control-Allow-Origin — кто должен чинить, фронт или бэк?

Ответ. CORS — политика браузера; заголовки Access-Control-Allow-* выставляет сервер или прокси. Фронт "обойти" CORS не может (кроме dev-proxy). Подробнее здесь — фронтенд.

Вопрос. SPA — обновил страницу на /profile — 404 от nginx.

Ответ. Сервер ищет файл /profile, которого нет — нужен fallback на index.html для client-side routing. Настраивается на веб-сервере/CDN. Подробнее здесь — типы веб-приложений.

Вопрос. Postman возвращает 200, fetch в браузере — ошибка.

Ответ. Postman не применяет CORS и cookies как браузер. Сравните URL, метод, заголовки, credentials во вкладке Network. Подробнее здесь — фронтенд.

Вопрос. "Фронтендер говорит, API сломано; бэкендер — у меня 200".

Ответ. Сверьте контракт — формат JSON, коды ошибок, поля. Один trace id в логах обеих сторон быстрее споров. Подробнее здесь — бэкенд.

Вопрос. С чего начать новичку — HTML или сразу React?

Ответ. Базовый HTML/CSS/JS и DOM — иначе фреймворк "магия". После — компонентный подход и один фреймворк углублённо. Подробнее здесь — фронтенд.

Вопрос. Вёрстка "плывёт" только в Safari на iPhone.

Ответ. Проверьте flex/grid, vh units, date inputs — Safari имеет свои баги. DevTools remote debugging или BrowserStack. Подробнее здесь — фронтенд.

Вопрос. npm run build падает с "JavaScript heap out of memory".

Ответ. Увеличьте лимит Node (NODE_OPTIONS=--max-old-space-size=4096), упростите bundle, проверьте циклические импорты. На CI — больше RAM агента. Подробнее здесь — фронтенд.

Вопрос. JWT "протух" — пользователя выкидывает каждые 15 минут.

Ответ. Нужен refresh token или silent renew; храните access коротким, refresh — HttpOnly cookie. Подробнее здесь — бэкенд.

Вопрос. Cookie не уходит на API с другого домена.

Ответ. Нужны SameSite=None; Secure, credentials: 'include' в fetch и CORS с конкретным origin, не *. Подробнее здесь — фронтенд.

Вопрос. Mixed Content — страница HTTPS, API HTTP.

Ответ. Браузер блокирует активный mixed content. Поднимите API на HTTPS или прокси через тот же origin. Подробнее здесь — сеть для бэкенда.

Вопрос. .env работает локально, на проде переменные пустые.

Ответ. Vite/Webpack вшивают env на этапе сборки — задайте secrets в CI/CD и hosting panel. Не коммитьте .env с ключами. Подробнее здесь — бэкенд.

Вопрос. Нужен ли nginx, если есть Node/Express?

Ответ. В проде часто reverse proxy — TLS, gzip, rate limit, статика. Node слушает localhost:3000, nginx — 443. Подробнее здесь — Linux для бэкенда.

Вопрос. Docker "упаковал бэкенд" — фронт туда же?

Ответ. Часто отдельные контейнеры — static nginx + api + db. Multi-stage build для фронта: build → nginx image. Подробнее здесь — бэкенд.

Вопрос. Страница грузится 8 секунд — пользователь винит "сервер медленный".

Ответ. Разделите TTFB и размер bundle в DevTools Lighthouse. Часто виноваты тяжёлые JS-картинки без lazy load, а не только API. Подробнее здесь — метрики.

Вопрос. API отвечает 500 — фронт показывает "undefined is not an object".

Ответ. Фронт должен обрабатывать ошибки и пустые тела; параллельно смотрите stack trace на сервере и correlation id. Подробнее здесь — наблюдаемость.

Вопрос. Full-stack — это "знаю всё сразу"?

Ответ. Это умение связать клиент и сервер end-to-end; глубину обычно наращивают по одной стороне, понимая смежную. Подробнее здесь — intro.

Вопрос. SSR vs CSR — сайт-визитка тормозит на первом экране.

Ответ. Для SEO и быстрого FCP визитке подойдёт SSG или SSR; тяжёлый SPA без нужды — лишний JS. Подробнее здесь — типы приложений.

Вопрос. GraphQL "лучше REST" — мигрировать в учебном проекте?

Ответ. GraphQL решает overfetch/underfetch, но добавляет сложность схемы и кэша. Для первого API REST проще. Подробнее здесь — бэкенд.

Вопрос. Мобильное приложение — это фронтенд или отдельный мир?

Ответ. UI на устройстве — клиент; тот же бэкенд API часто обслуживает web и mobile. React Native/Flutter — другой стек рендера, те же контракты. Подробнее здесь — мобильные приложения.

Вопрос. База "лежит рядом" с API в одном процессе — норм для прода?

Ответ. Для учебного MVP — да; в проде БД отдельный сервис с бэкапами и пулом соединений. Подробнее здесь — бэкенд.

Вопрос. Логи на сервере есть, в браузере "ничего не понятно" — как связать?

Ответ. Передавайте X-Request-ID / trace id с фронта или генерируйте на gateway — один id в логах FE (console) и BE. Подробнее здесь — наблюдаемость.

Вопрос. Письма "не отправляются" из формы регистрации.

Ответ. SMTP, SPF/DKIM, попадание в spam — зона бэкенда и инфра. Проверьте очередь и логи mailer. Подробнее здесь — исходящая почта.

Вопрос. Хочу только "красивую кнопку" — это фронтенд без бэкенда?

Ответ. Статическая вёрстка — да; как только нужны логин, данные, оплата — нужен сервер и БД. Подробнее здесь — intro.

Вопрос. WebSocket чат работает у разработчика, на проде обрывается.

Ответ. Прокси/nginx должен поддерживать Upgrade: websocket, таймауты idle. Load balancer без sticky session ломает long-lived соединения. Подробнее здесь — сеть.

Вопрос. p99 latency вырос — пользователи "не замечают", чинить?

Ответ. Среднее скрывает хвост медленных запросов — именно они бесят. Смотрите перцентили и SLO. Подробнее здесь — метрики.

Вопрос. Junior "full-stack" на собеседовании — реалистичные ожидания?

Ответ. Часто ждут один стек глубже + базовое понимание второй стороны. Матрица компетенций помогает честно оценить пробелы. Подробнее здесь — компетенции.

Вопрос. TypeScript ругается, npm run dev с --ignore-build-errors — так жить?

Ответ. Временный костыль для прототипа; в CI сборка должна падать на type errors. Иначе баги уедут в прод. Подробнее здесь — фронтенд.

Вопрос. Что такое фронтенд простыми словами?

Ответ. Всё, что видит пользователь в браузере — HTML, CSS, JavaScript, интерфейс и запросы к API. Подробнее здесь — фронтенд.

Вопрос. Что такое бэкенд backend?

Ответ. Серверная часть — API, БД, бизнес-логика, авторизация, интеграции. Подробнее здесь — бэкенд.

Вопрос. Frontend vs backend — в чём разница?

Ответ. Клиент (браузер) vs сервер; связаны через HTTP/API. Подробнее здесь — intro.

Вопрос. HTML CSS JavaScript — зачем все три?

Ответ. HTML — структура, CSS — вид, JS — поведение. Подробнее здесь — фронтенд, HTML.

Вопрос. Что такое REST API?

Ответ. HTTP-методы (GET, POST…) и URL для обмена JSON между клиентом и сервером. Подробнее здесь — бэкенд.

Вопрос. CORS error fetch — как исправить?

Ответ. Сервер должен отдать Access-Control-Allow-Origin; на dev — proxy в Vite/Webpack. Подробнее здесь — фронтенд, Fetch / axios — типовые запросы (раздел CORS).

Вопрос. React Vue Angular — что выбрать новичку?

Ответ. Сначала чистый JS/DOM; затем один фреймворк глубоко — React популярен на рынке. Подробнее здесь — фронтенд, JavaScript.

Вопрос. SPA single page application — что это?

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

Вопрос. SSR vs CSR vs SSG — разница?

Ответ. CSR — рендер в браузере; SSR — HTML на сервере; SSG — статика при сборке. Подробнее здесь — типы приложений.

Вопрос. JWT токен — что это в вебе?

Ответ. Подписанный токен для аутентификации без сессии на сервере; храните безопасно. Подробнее здесь — бэкенд.

Вопрос. Full stack developer — кто это?

Ответ. Разработчик, который делает и клиент, и сервер end-to-end. Подробнее здесь — intro, компетенции.

Вопрос. Nginx зачем нужен веб-сервер?

Ответ. Reverse proxy, статика, TLS, балансировка перед Node/Python. Подробнее здесь — Linux.

Вопрос. Docker для веб-разработки — с чего начать?

Ответ. Отдельные контейнеры api + db + nginx; docker-compose для локали. Подробнее здесь — бэкенд.

Вопрос. localhost работает deployed нет — почему?

Ответ. Другие env, пути к статике, CORS, HTTPS — смотрите Network в DevTools. Подробнее здесь — типы приложений.

Вопрос. 404 при обновлении страницы React Router?

Ответ. Настройте fallback на index.html на nginx/Apache. Подробнее здесь — типы приложений.

Вопрос. GraphQL vs REST — что выбрать?

Ответ. REST проще для старта; GraphQL гибче в выборке полей, сложнее в кэше. Подробнее здесь — бэкенд.

Вопрос. WebSocket — зачем если есть HTTP?

Ответ. Двусторонний канал в реальном времени — чаты, live-обновления. Подробнее здесь — сеть.

Вопрос. TypeScript зачем если есть JavaScript?

Ответ. Типы ловят ошибки до запуска; удобнее в больших проектах. Подробнее здесь — фронтенд.

Вопрос. Адаптивная вёрстка responsive — как сделать?

Ответ. Flexbox/Grid, media queries, mobile-first. Подробнее здесь — фронтенд.

Вопрос. HTTP vs HTTPS — в чём разница?

Ответ. HTTPS шифрует трафик (TLS) — обязателен для логинов и форм. Подробнее здесь — сеть, как работают сайты.

Вопрос. Junior frontend с чего начать учиться?

Ответ. HTML → CSS → JS → DOM → fetch → один фреймворк. Подробнее здесь — фронтенд, основные языки.

Вопрос. CI CD для веб-проекта — что это?

Ответ. Автосборка, тесты и деплой при push в Git — GitHub Actions, GitLab CI. Подробнее здесь — бэкенд, код и разработка.

Вопрос. Микросервисы vs монолит — для учебного проекта?

Ответ. Начните с монолита — проще отладка; микросервисы — при масштабе и команде. Подробнее здесь — бэкенд.

Вопрос. DevTools браузера — как отладить сайт?

Ответ. F12 → Elements, Console, Network — смотрите ошибки JS и запросы API. Подробнее здесь — DevTools в браузере — справочник, фронтенд.

Что запомнить

Фронтенд и бэкенд — две стороны одного приложения. Пользователь видит клиент; сервер обеспечивает правила, данные и интеграции.