Как работает сайт: клиент, сервер, HTTP и браузер

Коротко: сайт — это запрос и ответ

Любой сайт работает по модели клиент — сервер. Клиент — это ваш браузер (или мобильное приложение). Сервер — компьютер в дата-центре, который хранит код и данные сайта. Они общаются по протоколу HTTP: клиент отправляет запрос, сервер возвращает ответ.

Всё остальное — DNS, базы данных, CSS, JavaScript — это детали, которые помогают этому диалогу быть быстрым, красивым и полезным.

Участники и их роли

Весь путь на одной схеме

[Вы] --вводите адрес--> [Браузер]
                           |
                           | 1. "Какой IP у example.com?"
                           v
                         [DNS] --> 203.0.113.10
                           |
                           | 2. HTTP-запрос: GET /catalog
                           v
                        [Сервер] --3. запрос данных--> [База данных]
                           |      <--4. товары--------
                           | 5. HTTP-ответ: 200 OK + HTML
                           v
                       [Браузер] --6. догружает CSS, JS, картинки
                           |
                           v
                   [Готовая страница]

Что такое HTTP-запрос и ответ

Запрос состоит из метода, адреса и заголовков. Самые частые методы:

• GET — получить данные (открыть страницу, загрузить картинку);
• POST — отправить данные (форма заявки, оплата);
• PUT/PATCH и DELETE — изменить или удалить данные, чаще всего через API.

Ответ содержит код статуса и тело. Коды, которые полезно знать:

• 200 — всё хорошо;
• 301/302 — страница переехала, браузер идёт по новому адресу;
• 404 — такой страницы нет;
• 500 — ошибка на стороне сервера.

Сегодня почти все сайты используют HTTPS — тот же HTTP, но в зашифрованном канале. Без него браузер помечает сайт как небезопасный.

Где живут HTML, CSS, JavaScript и база данных

• HTML — структура и содержание страницы: заголовки, текст, ссылки, формы.
• CSS — внешний вид: цвета, шрифты, сетка, адаптация под телефон.
• JavaScript — поведение: меню, слайдеры, отправка форм без перезагрузки.

Эти три вещи выполняются в браузере — это фронтенд. Код на сервере, который решает, что именно отдать пользователю, и работает с базой данных, — это бэкенд. Пользователь никогда не видит базу напрямую: только то, что сервер решил показать.

Статический и динамический сайт

• Статический — сервер отдаёт заранее готовые файлы. Быстро, дёшево в хостинге, подходит для лендингов и блогов.
• Динамический — страница собирается в момент запроса из данных в базе. Нужен для личных кабинетов, магазинов, CRM.

Современные фреймворки часто комбинируют оба подхода: часть страниц генерируется заранее, часть — по запросу.

Частые заблуждения

• «Сайт хранится в браузере». Нет, браузер лишь временно кэширует файлы, оригинал — на сервере.
• «Домен и хостинг — одно и то же». Домен — это имя, хостинг — место, где работает сервер. DNS связывает их.
• «Если страница открылась, сервер в порядке». Страница может быть взята из кэша или CDN, а API в этот момент уже недоступен.