Що таке CDN? Мережі доставки контенту простими словами

CDN (content delivery network) — це мережа серверів у багатьох містах, які зберігають копії файлів вашого сайту: зображень, скриптів, таблиць стилів, а іноді й цілих сторінок. Коли хтось відвідує ваш сайт, файли надсилаються з локації поблизу, а не з далекого сервера. Завдяки цьому сторінки відкриваються швидше, навантаження з вашого сервера знімається, а сайт краще витримує сплески трафіку.

Чому CDN важливий, коли ви створюєте з ШІ

Можливо, ви ніколи самі не налаштовуватимете CDN — багато хостинг-платформ ставлять його перед вашим сайтом автоматично. Але ви відчуватимете його дію:

• Швидкість. Швидше завантажувані сторінки утримують відвідувачів, а пошукові системи враховують це в ранжуванні. Див. як зробити ваш сайт швидшим.
• «Чому моя зміна не видна?» Після публікації оновлення копія старої версії може ще якийсь час лишатися в кеші. Знання причини економить багато плутанини.
• Приватність і коректність. Якщо CDN закешує щось не те — сторінку з даними одного користувача, — наступний відвідувач може це побачити. Розуміння того, що можна і що не можна кешувати, допомагає ставити правильні запитання.

Побутова аналогія

Уявіть пекарню, яка продає хліб по всій країні з однієї крамниці. Кожен клієнт, хоч би де він жив, мусить чекати доставки з цієї єдиної крамниці — а в людний день черга величезна.

CDN — це як розкласти той самий хліб у місцевих крамничках по всій країні. Клієнти беруть його поблизу, швидко, а головна пекарня лише час від часу поповнює крамнички. Але є нюанс: коли пекарня змінює рецепт, крамнички продаватимуть старий хліб, поки їм не скажуть замінити його або поки старий запас не зійде.

Як працює CDN

1. Ваш origin. Сайт живе на основному сервері або хостинг-платформі — його називають origin.
2. Edge-локації. CDN має сервери в багатьох місцях, які називаються edge-локаціями або points of presence.
3. Маршрутизація. Коли відвідувач запитує сайт, DNS або мережева маршрутизація направляє його до найближчого edge. Див. як працюють домени та DNS.
4. Cache hit. Якщо в edge уже є свіжа копія файлу, її одразу надсилають.
5. Cache miss. Якщо копії немає, edge забирає файл з вашого origin, надсилає відвідувачу і зберігає копію для наступного.
6. Закінчення строку. Кожна копія зберігається певний час, який задають cache-заголовки вашого сервера, або доки її не очистять.

Практичний приклад: портфоліо фотографа

У фотографа є головна сторінка, галерея з 60 великими зображеннями і форма зв'язку. Origin розташований у Європі. Відвідувач із Сінгапуру відкриває галерею.

• Без CDN: кожне зображення їде з Європи. Кожен запит долає півсвіту, тож галерея заповнюється повільно.
• З CDN: перший відвідувач поблизу Сінгапуру змушує edge там забрати й зберегти зображення. Кожен наступний відвідувач у цьому регіоні отримує їх звідси, значно швидше.

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

/index.html                    → короткий час кешування, перевіряється часто
/assets/index-3f9a2c.js        → кешується довго
/assets/hero-8b41d0.jpg        → кешується довго

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

Форма зв'язку — інакша. Її відправки щоразу йдуть на сервер; їх ніколи не можна кешувати.

Що кешувати, а що ні

Ключові терміни

Про кешування загалом — у браузерах, серверах і базах даних — див. що таке кешування.

Типові хибні уявлення

• «CDN робить усе швидшим». Він прискорює доставку файлів. Повільний запит до бази або повільний виклик ШІ на вашому сервері все одно залишаються повільними.
• «CDN замінює хостинг». Він стоїть перед вашим хостингом. Origin усе одно потрібен.
• «Якщо я оновив сайт, усі одразу це побачать». Старі копії можуть ще якийсь час залишатися в CDN і в браузерах. Щоб перевірити, зробіть жорстке оновлення і використовуйте хешовані назви файлів.
• «Кешування завжди безпечне». Кешування персоналізованої сторінки у спільному кеші — реальний ризик для приватності. Приватні відповіді треба позначати як такі, що не можна кешувати.
• «CDN потрібні лише великим компаніям». Багато хостингів включають його для маленьких сайтів без додаткових зусиль.

Що запитати у вашого конструктора на основі ШІ

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

CDN і Mythex

Коли ви публікуєте на Mythex, статичні фронтенди розгортаються як статичні сайти, а в документації зазначено, що кеші CDN можуть ненадовго відставати після оновлення: якщо після повторної публікації ви досі бачите стару версію, зробіть жорстке оновлення публічної адреси. Нічого налаштовувати для цього не треба. Якщо ви під'єднуєте власний домен, DNS якого на Cloudflare, документація просить встановити запис у режим «DNS only», а не proxied, щоб Mythex міг коректно видати HTTPS. Див. як опублікувати і власні домени у документації, а також наш посібник про веб-хостинг.

Запитання