Что такое CDN? Сети доставки контента простыми словами

CDN (сеть доставки контента) — это сеть серверов, разбросанных по множеству городов, которые хранят копии файлов вашего сайта: изображений, скриптов, таблиц стилей, иногда целых страниц. Когда кто-то заходит на ваш сайт, его обслуживают с ближайшей к нему точки, а не с одного далёкого сервера. Это ускоряет загрузку страниц, снимает нагрузку с вашего собственного сервера и помогает сайту выдерживать всплески трафика.

Почему CDN важен при создании с ИИ

Вы, возможно, никогда не настроите CDN сами: многие хостинг-платформы ставят его перед сайтом автоматически. Но вы почувствуете его действие:

• Скорость. Страницы, которые быстро открываются, удерживают посетителей, а поисковые системы учитывают скорость. См. как ускорить свой сайт.
• «Почему моё изменение не видно?» После публикации обновления копия старой версии может некоторое время сохраняться. Если знать причину, можно избежать многой путаницы.
• Приватность и корректность. Если CDN закэширует что-то не то, например страницу с личными данными одного пользователя, следующий посетитель может это увидеть. Понимание того, что стоит кэшировать, а что нет, помогает задавать правильные вопросы.

Бытовая аналогия

Представьте пекарню, которая продаёт хлеб по всей стране из одной лавки. Каждый покупатель, как бы далеко он ни жил, ждёт доставки из этой единственной лавки, а в загруженный день очередь огромна.

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

Как работает CDN

1. Источник. Ваш сайт живёт на основном сервере или хостинг-платформе. Это называется источником (origin).
2. Периферийные узлы. CDN работает на серверах во многих местах, которые называются периферийными узлами (edge locations) или точками присутствия (PoP).
3. Маршрутизация. Когда посетитель запрашивает ваш сайт, DNS или сетевая маршрутизация направляет его к ближайшему узлу. См. как работают домены и DNS.
4. Попадание в кэш (cache hit). Если в этом узле уже есть свежая копия файла, он сразу её отправляет.
5. Промах кэша (cache miss). Если копии нет, узел получает файл из источника, отправляет посетителю и сохраняет копию для следующего.
6. Истечение срока. Каждая копия хранится заданное время, которое задают заголовки кэша вашего сервера, или до тех пор, пока её не очистят.

Практический пример: портфолио фотографа

Портфолио фотографа состоит из главной страницы, галереи с 60 большими снимками и формы обратной связи. Источник находится в Европе. Посетитель из Сингапура открывает галерею.

• Без CDN: каждое изображение идёт из Европы. Каждый запрос проходит через полмира, и галерея заполняется медленно.
• С CDN: первый посетитель из региона Сингапура заставляет узел в этом регионе получить и сохранить изображения. Все последующие посетители из этого региона получают их с ближайшего узла, гораздо быстрее.

Теперь фотограф меняет главное фото на главной странице и публикует обновление. Вот что решает, увидят ли посетители изменение:

/index.html                    → короткое время кэша, проверяется часто
/assets/index-3f9a2c.js        → кэшируется долго
/assets/hero-8b41d0.jpg        → кэшируется долго

Современные инструменты сборки, включая Vite, дают файлам имена с хешем, например hero-8b41d0.jpg. Когда файл меняется, меняется и его имя, поэтому страница запрашивает совершенно новый файл, которого ещё не видел ни один кэш. Сама HTML-страница кэшируется лишь ненадолго, поэтому быстро направляет посетителей на новые файлы. Так достигается и долгое кэширование, и свежие обновления.

Форма обратной связи устроена иначе. Её данные каждый раз уходят на сервер, и их не должно быть в кэше никогда.

Что кэшировать, а что нет

Ключевые термины

О кэшировании в целом, в браузерах, серверах и базах данных, см. что такое кэширование.

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

• «CDN делает всё быстрее». Он ускоряет доставку файлов. Медленный запрос к базе данных или медленный вызов ИИ на вашем сервере всё равно останутся медленными.
• «CDN заменяет хостинг». Он стоит перед вашим хостингом. Источник всё равно нужен.
• «Если я обновил сайт, все сразу это увидят». Старые копии могут ненадолго задержаться в CDN и в браузерах. Для проверки используйте жёсткое обновление страницы и хешированные имена файлов.
• «Кэширование всегда безопасно». Кэширование персонализированной страницы в общем кэше — реальный риск для приватности. Приватные ответы нужно помечать как не подлежащие кэшированию.
• «CDN нужны только крупным компаниям». Многие хостинги включают его для небольших сайтов без дополнительных усилий.

Что спросить у конструктора на основе ИИ

• «Есть ли CDN перед этим сайтом? Какие файлы он кэширует и как долго?»
• «Убедись, что собранные JavaScript, CSS и изображения имеют хешированные имена и долгий срок кэширования, а HTML — короткий.»
• «Никогда не кэшируй страницы после входа и ответы API с личными данными в общем кэше.»
• «Сожми и уменьши изображения, чтобы галерея загружалась быстро.»
• «Я опубликовал обновление, но всё ещё вижу старую версию. Это кэш браузера или CDN?»

CDN и Mythex

Когда вы публикуете проект в Mythex, фронтенды развёртываются как статические сайты, и в документации отмечено, что кэши CDN могут ненадолго отставать после обновления: если после повторной публикации вы всё ещё видите старую версию, сделайте жёсткое обновление публичного адреса. Ничего настраивать для этого не нужно. Если вы подключаете собственный домен, DNS которого находится в Cloudflare, документация просит поставить для записи режим «Только DNS» (DNS only), а не проксирование, чтобы Mythex смог корректно выпустить HTTPS. См. как опубликовать и собственные домены в документации, а также наше руководство по веб-хостингу.

Вопросы