Как устроен веб
Клиент, сервер, DNS, URL и origin — что происходит, когда вы открываете страницу.
Обновлено
Что такое веб на самом деле
Веб — это разговор двух программ:
- Клиент — обычно браузер. Он что-то запрашивает.
- Сервер — компьютер, который принимает запросы и отправляет ответы (HTML, JSON, изображения).
У этого разговора всегда одна форма: запрос → ответ. Каждая открытая страница — это десятки таких пар (HTML, CSS, JS, шрифты, изображения).
Что происходит, когда вы вводите адрес
- URL разбирается на части (протокол, домен, путь).
- DNS превращает домен (
learn-js.vercel.app) в IP-адрес (76.76.21.21) — как телефонная книга. - Браузер открывает соединение с сервером (TCP + TLS для HTTPS).
- Отправляет HTTP-запрос:
GET /js/functions. - Сервер отвечает HTML.
- Браузер читает HTML, находит CSS/JS/изображения и запрашивает их тоже.
- Собирает страницу и рисует её на экране (урок Как браузер отрисовывает страницу).
Анатомия URL
https://learn-js.vercel.app:443/js/functions?tab=exercises#closurehttpsпротоколlearn-js.vercel.appхост:443порт/js/functionsпуть?tab=exercisesquery#closurehash
| Часть | Роль |
|---|---|
| протокол | как общаемся: https (шифрованно) или http |
| хост | какой сервер |
| порт | «дверь» сервера; по умолчанию 443 для https, 80 для http |
| путь | какой ресурс |
| query | параметры (?page=2&sort=new) — уходят на сервер |
| hash | позиция на странице (#closure) — на сервер не отправляется |
Origin
Origin = протокол + хост + порт. У https://a.com и https://a.com/blog один origin; у https://api.a.com — другой. Браузер изолирует origin'ы друг от друга — это основа веб-безопасности (см. Безопасность).
Frontend, backend, full-stack
| Где работает | Примеры | |
|---|---|---|
| Frontend | в браузере | HTML, CSS, JS, React |
| Backend | на сервере | базы данных, аутентификация, API |
| Full-stack фреймворк | и там, и там | Next.js — Server Components работают на сервере, Client Components в браузере |
Статика и динамика
- Статика — HTML-файл готов заранее; сервер просто его отдаёт. Очень быстро, можно разместить на CDN.
- Динамика — HTML генерируется при каждом запросе (зависит от пользователя или свежих данных).
Next.js совмещает оба подхода: всё, что может быть статичным, генерируется заранее, остальное — по запросу.
Коротко
- Веб = клиент спрашивает, сервер отвечает.
- DNS превращает домен в IP.
- URL = протокол + хост + путь + query + hash; origin = протокол + хост + порт.
- Одна страница = десятки запросов.