Vercel

Коротко: Хостинг-платформа, що спеціалізується на проєктах Next.js (та інших фронтенд-фреймворках) — кожен git push може автоматично запускати новий деплой.

Докладніше: Проєкти належать «команді» або особистому обліковому запису; у кожного проєкту свої змінні середовища, домени та підключення сховищ (наприклад, Vercel Blob). CLI (vercel) може деплоїти вручну паралельно з автоматичним деплоєм із Git (vercel --prod) — корисно, наприклад, якщо автора коміту Git заблоковано для автоматичного деплою.

Подробиці

Production- та preview-деплої

Кожен push у налаштовану production-гілку (зазвичай main) автоматично запускає production-деплой; push в інші гілки чи pull request, навпаки, автоматично створюють власні preview-деплої (preview deployments) — кожен являє собою цілком самостійну версію застосунку, доступну за власним URL, ізольовану від production. Це дає змогу протестувати зміну наживо (зокрема реальну серверну функціональність, а не лише статичний HTML) ще до злиття. У кожного preview-деплою можуть бути й власні змінні середовища — наприклад, тестова база даних замість реальної production-бази — щоб експерименти в preview-середовищах лишалися безпечними для реальних даних користувачів.

Serverless- та edge-функції

На Vercel проєкти Next.js за замовчуванням працюють на поєднанні статично попередньо відрендерених сторінок (скрізь, де можливо, наприклад сторінок без користувацького вмісту) та serverless/edge-функцій для всього, що потрібно обчислювати динамічно на кожен запит (API-маршрути, Server Components з доступом до бази даних). Різниця між двома типами функцій: serverless-функції працюють у повному середовищі Node.js (більше сумісності, але повільніший холодний старт), edge-функції — у легшому середовищі виконання, розподіленому ближче до користувача (швидший холодний старт, але обмеженіша підтримка API Node.js) — який тип використовується, можна задавати для кожного маршруту через export const runtime = "edge". «Холодний старт» означає час до готовності функції, що наразі не працює, до нового запиту — за малого трафіку (функцію викликають рідко) ця різниця помітніша, ніж за постійно високого навантаження, коли функції зазвичай і так лишаються «теплими».

Edge-мережа та CDN

Статичний вміст (попередньо відрендерені сторінки, зображення, бандли CSS/JS) автоматично роздається через глобальну CDN (мережу доставки вмісту) — Vercel зберігає копії у багатьох географічно розподілених точках, тож користувач отримує вміст із найближчої точки, а не з єдиного, потенційно далекого сервера. Це помітно скорочує час завантаження, особливо для користувачів, географічно віддалених від вихідного розташування сервера.

Процес збирання та кешування

Під час кожного деплою Vercel запускає повний процес збирання Next.js (next build) в ізольованому середовищі збирання — залежності кешуються між збираннями (кеш для node_modules), щоб пришвидшити повторні збирання того самого проєкту. Якщо збирання не вдалося (наприклад, через помилку TypeScript чи відсутню змінну середовища), попередня робоча production-версія лишається в мережі без змін — тобто невдалий деплой не виводить застосунок з ладу автоматично, він просто відкидається.

Домени та DNS

Проєкти Vercel автоматично отримують піддомен *.vercel.app; власні домени можна додатково підключити записами DNS (зазвичай записи A або CNAME). Для production-використання власний домен майже завжди розумніший за автоматично створений піддомен Vercel — хоча б заради впізнаваності та незалежності від платформи хостингу.

Див. також: Змінні середовища, Vercel Blob Storage, DNS-записи