SysPad › Lessons › networking lessons › Vercel

How Vercel works

Frontend cloud - global CDN for static assets plus serverless/edge functions for SSR and APIs. Static traffic is effectively unbounded; the ceiling and the bill live in function invocations and bandwidth.

git push, wait forty seconds, your app is live on a global CDN with a preview URL for every branch. Vercel made deploys boring, which is the highest compliment infrastructure gets. The engineering lesson hiding inside: every request is either static (almost free, almost infinite) or a function (metered), and the ratio decides everything.

What you will learn

What actually happens between git push and a live URL?
Which requests are CDN-static vs function invocations?
Why is the Hobby tier not a production plan?
How does the static/dynamic ratio drive cost and ceilings?

Deploys as a side effect of git

Connect a repo and Vercel builds on every push: production for the main branch, a unique preview URL for every PR. Rollback is re-pointing to a previous immutable build. This workflow, not raw hosting, is the product.

Static or function: the only question

Pre-rendered pages, JS bundles and images ship from the edge CDN: cheap, cached, effectively unbounded. SSR pages and API routes run as serverless functions, billed per invocation and compute time. Frameworks blur the line in code, never in the bill.

Hobby is a demo tier

The free Hobby plan is explicitly non-commercial with fair-use limits. Real products go Pro (per-seat plus usage beyond included quotas). The classic mistake is launching a commercial thing on Hobby and meeting the limits mid-launch.

⚓ On the SysPad node, the "Dynamic share of traffic" slider is the whole cost model: 10% vs 80% dynamic at the same RPS is the difference between pocket money and a real line item.

When do teams move OFF Vercel?

Usually when sustained function volume makes usage pricing exceed the cost of running equivalent containers, when they need long-running/stateful servers (websockets, background workers), or when compliance wants everything in one cloud account. The static assets usually stay happily on a CDN wherever they land.

Flashcards

Two Next.js apps, identical 2M monthly views. App A bills near zero, app B bills hundreds. What single architectural difference explains it?: The static/dynamic split: A pre-renders (CDN-static views), B server-renders per request (2M function invocations + compute). Same framework, opposite economics.
A startup launches a paid product on Vercel Hobby "until it makes money." What two things are wrong?: Hobby is licensed for non-commercial use, and its fair-use limits are sized for demos: launch traffic is exactly when they bind. Pro before launch, not after the incident.
A designer wants to see a PR's changes without pulling the branch. What does Vercel give them for free?: The preview deployment URL on the PR: every branch push builds an isolated, shareable environment. It is the workflow feature that made Vercel the frontend default.

Sources

Open the SysPad canvas · Official Vercel documentation