Статический веб-ресурс — это файл (HTML-страница, таблица стилей CSS, скрипт JS, картинка, шрифт), который сервер отдает браузеру в том виде, в каком файл лежит на диске, без сборки на лету. Динамический ресурс — это ответ, который сервер или клиент собирает под конкретный запрос: из шаблона, кода и данных.
Содержание
Ниже разберу, чем статический ресурс отличается от статического сайта и от SSR, как браузер и CDN кешируют статику, где проходит граница между генерацией на этапе сборки (SSG) и на этапе запроса (SSR), и по какому признаку выбирать подход.
Три термина, которые часто путают
Тема кажется простой, пока не смешаешь три разных понятия. Разведу их сразу, до сравнения.
- Статический ресурс — отдельный файл. Признак: сервер отдает байты как есть, ответ не зависит от того, кто и когда его запросил.
- Статический сайт — сайт, который целиком собран из статических файлов заранее. Даже если в сборке участвовал сложный генератор, в рантайме сервер просто раздает готовые файлы.
- SSR (server-side rendering) — сервер генерирует HTML на каждый запрос из шаблона и данных. Это динамика: тот же URL для разных пользователей или в разное время может дать разный HTML.
Важно: «статический сайт» не значит «примитивный», а «динамический» не значит «медленный». Сайт на генераторе статики может выглядеть интерактивным за счет JS, а SSR-ответ можно закешировать и раздавать как статику. Различие — в том, где и когда собирается HTML, а не в том, как он выглядит.
Как сервер отдает статику
Минимальная статическая страница — это один HTML-файл, который не требует никакой обработки на сервере.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Визитка</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<h1>Студия «Пример»</h1>
<p>Телефон: +7 000 000-00-00</p>
</body>
</html>Когда браузер запрашивает такую страницу, веб-сервер (nginx, Apache) читает файл с диска и отдает его содержимое. Ответ одинаков для всех: у страницы нет ветвлений по пользователю, времени или базе данных. То же и с /static/app.css или картинкой: это отдельные статические ресурсы, каждый со своим URL.
Проверить, что ресурс отдается как статика, можно по заголовкам ответа.
curl -I https://example.com/static/app.cssHTTP/2 200
content-type: text/css
cache-control: public, max-age=31536000, immutable
last-modified: Wed, 10 Sep 2026 12:00:00 GMT
etag: "5f3a-c1"
Заголовок content-type говорит, что это CSS-файл, last-modified и etag описывают версию файла, а cache-control — как долго его можно хранить в кеше. У динамического ответа этих гарантий обычно нет: там чаще стоит cache-control: no-store или короткий срок жизни.
Что такое динамический ресурс
Динамический ресурс собирается под запрос. Классический серверный сценарий выглядит так:
- Браузер отправляет запрос на сервер (например, GET /profile).
- Сервер запускает код на языке бэкенда (PHP, Python, Java, Node.js и других).
- Код берет данные (из базы, кеша, внешнего API) и подставляет их в шаблон.
- Сервер возвращает собранный HTML или JSON, браузер его отображает.
Пример на PHP: страница, которая здоровается по-разному в зависимости от параметра запроса.
<?php
$name = htmlspecialchars($_GET['name'] ?? 'гость', ENT_QUOTES, 'UTF-8');
echo "<h1>Привет, {$name}!</h1>";Запрос /?name=Аня вернет <h1>Привет, Аня!</h1>, а /?name=Иван — другой HTML. Тот же файл, разный результат: это и есть динамика. Функция htmlspecialchars здесь не украшение, а защита: без нее значение из URL попало бы в HTML напрямую, что открывает XSS. Любой динамический вывод пользовательских данных нужно экранировать.
Второй вид динамики — клиентский рендеринг (CSR): сервер отдает почти пустой HTML и JS-бандл, а страницу в браузере строит JavaScript, дозапрашивая данные через API. Так работают одностраничные приложения (SPA). При этом сами JS- и CSS-бандлы остаются статическими ресурсами — меняется только то, что итоговый HTML собирается на клиенте.
Статические и динамические ресурсы: сравнение
| Признак | Статический ресурс | Динамический ресурс |
|---|---|---|
| Где собирается ответ | заранее, лежит готовым файлом | на сервере (SSR) или в браузере (CSR) под запрос |
| Зависит ли от пользователя/данных | нет, всем один и тот же | да, может отличаться |
| Скорость отдачи | высокая, отдача файла | ниже: нужен код, часто запрос к БД |
| Кеширование | простое и агрессивное | ограниченное, требует аккуратности |
| Персонализация | нет | есть |
| Порог входа | HTML/CSS/JS | плюс бэкенд, база данных, шаблонизатор |
| Типичные примеры | лендинг, документация, ассеты | личный кабинет, магазин, лента, форум |
Таблица помогает выбирать по ведущему признаку. Нужен один и тот же контент для всех и максимальная скорость — склоняйтесь к статике. Нужен ответ, зависящий от пользователя или свежих данных, — нужна динамика.
CDN и кеширование статики
Главное преимущество статики — ее легко кешировать, и это отдельный рычаг производительности.
Кеш работает на нескольких уровнях: кеш браузера, промежуточные кеши и CDN (сеть доставки контента) — серверы, распределенные географически, которые держат копии файлов ближе к пользователю. Управляют кешем HTTP-заголовки.
Cache-Control: public, max-age=31536000, immutable
Здесь max-age=31536000 (секунд, это год) разрешает хранить файл долго, а immutable говорит браузеру не перепроверять его до истечения срока. Такой заголовок безопасен только для файлов с версией в имени, например app.7f3c1.css: при изменении содержимого меняется имя, и браузер скачивает новый файл. Для HTML-страницы, которую нужно обновлять, ставят короткий срок или проверку через ETag.
Пример правила для nginx: раздавать ассеты из каталога с длинным сроком жизни.
location /static/ {
root /var/www/site;
add_header Cache-Control "public, max-age=31536000, immutable";
}
Динамику так закешировать напрямую нельзя: ответ зависит от запроса. Но и здесь есть прием — положить перед бэкендом кеширующий слой и хранить готовый HTML для часто запрашиваемых страниц. Тогда динамическая по природе страница отдается как статика, пока данные не изменились. Это и есть та середина, где граница «статика или динамика» размывается.
SSG и SSR: где граница
Два подхода часто путают, а разница в том, когда собирается HTML.
- SSG (static site generation) — генерация на этапе сборки. Инструмент один раз собирает готовые HTML-файлы из шаблонов и данных, дальше сервер раздает их как статику. Подходит, когда контент меняется нечасто: документация, блог, лендинги.
- SSR — генерация на этапе запроса. HTML собирается каждый раз заново, поэтому может учитывать свежие данные и пользователя. Подходит для персонализированных и часто меняющихся страниц.
Границу стоит держать в голове: SSG дает файлы (статика с простым кешем), SSR дает ответ на запрос (динамика). Многие современные фреймворки умеют оба режима и смешивают их на уровне отдельных страниц, поэтому «статический» и «динамический» — это скорее про конкретный маршрут, чем про весь сайт целиком.
Когда что выбирать
Ориентир по задаче, а не по моде:
- Контент одинаков для всех и меняется редко (лендинг, справка, портфолио) — статика или SSG. Дешево, быстро, легко раздать через CDN.
- Нужна персонализация или свежие данные на каждый запрос (кабинет, корзина, лента) — динамика (SSR или CSR с API).
- Смешанный случай (магазин с общим каталогом и личной корзиной) — гибрид: каталог и ассеты статикой/SSG, корзину и профиль — динамикой.
Крайности редко оптимальны: чисто статический магазин не сделает оформление заказа сам, а полностью динамический лендинг тратит ресурсы там, где хватило бы файла на CDN.
Выводы
- Статический ресурс — это готовый файл, который сервер отдает как есть; динамический — ответ, собранный под запрос на сервере (SSR) или в браузере (CSR).
- Не путайте статический ресурс, статический сайт и SSR: различие в том, где и когда собирается HTML, а не в том, как страница выглядит.
- Статику легко и агрессивно кешировать через
Cache-Control,ETagи CDN; для динамики кеш ограничен и требует аккуратности. - SSG собирает HTML на этапе сборки (получается статика), SSR — на этапе запроса (динамика); современные фреймворки смешивают режимы по маршрутам.
- Выбор ведите по задаче: одинаковый редкий контент — статика/SSG, персонализация и свежие данные — динамика, часто — гибрид.
Где применяется / связь с практикой
Понимание границы между статикой и динамикой — базовый навык фронтенд-разработчика: он определяет, что можно отдать файлом и закешировать, а что придется собирать на запросе. Начинается все с уверенной верстки на HTML и CSS — именно из статических ресурсов складывается любая страница, а поверх них уже надстраивается динамика.
Освойте тему на практике
Разобрать верстку и подготовку статических ресурсов на практике помогает курс HTML/CSS. Посмотреть формат занятий и темы вживую можно на открытых уроках Otus — бесплатных вебинарах с разбором задач.
FAQ
Статический сайт — это всегда сайт без JavaScript?
Нет. JS-файлы сами по себе статические ресурсы, и статический сайт может быть интерактивным за счет клиентского кода. «Статический» означает, что HTML не собирается на сервере под запрос, а не отсутствие скриптов.
Можно ли закешировать динамическую страницу?
Да, если данные меняются не на каждый запрос: перед бэкендом ставят кеширующий слой и хранят готовый HTML заданное время. Персонализированные страницы, зависящие от конкретного пользователя, так кешировать нельзя.
Чем CDN отличается от кеша браузера?
Кеш браузера хранит файлы на устройстве одного пользователя, CDN — на распределенных серверах, которые отдают копию файла всем ближайшим пользователям. Оба уровня управляются заголовками Cache-Control и работают вместе.
