Infrastructure & Performance

⚡ Infrastructure & Performance

Build pipeline, Edge Network, caching architecture, Core Web Vitals, and performance optimization — the infrastructure knowledge that wins enterprise deals.

The Build Pipeline & Deployment Model

1. Git Push

Push to main (production) or any branch (preview). Vercel detects the framework automatically.

2. Build

Turbopack / webpack / SWC compilation. Static pages generated (SSG/ISR), route manifests, function bundles compiled, assets optimised.

3. Deploy

Build output deployed to CDN (static assets + ISR pages) and Vercel Functions infrastructure (serverless / Fluid).

4. Live

DNS updated, zero-downtime deployment. Preview URL generated for every non-production deployment.

🚀 Turbopack

Up to 700× faster cold builds than webpack
10× faster HMR (Hot Module Replacement)
Stable in Next.js 15 for development
Incremental computation — only rebuilds what changed
Enabled with next dev --turbopack
Rust-based bundler built by Vercel

🔒 Skew Protection

When a new deployment rolls out, some users may have old JavaScript from the previous deployment while the server runs new code. Vercel's Skew Protection routes requests to the deployment version that served the original HTML, ensuring consistency.

Strong enterprise selling point (Pro + Enterprise)

Edge Network & CDN

Vercel's CDN has Points of Presence (PoPs) around the world. Every request is routed to the nearest PoP.

Layer	Name	Latency	Description
User	Browser Cache	0ms	Client-side, user's browser. Controlled by Cache-Control headers.
Edge	Edge PoP Cache	~1-10ms	Vercel CDN, global Points of Presence. Sub-10ms for cache hits.
Regional	Regional Function Cache	~10-50ms	Next.js Data Cache and Full Route Cache. Per-function caching layer.
Origin	Origin Function	~100ms+	Serverless function or Fluid Compute instance executes and returns fresh data.

Caching — The Most Important Topic

Caching is where most customer problems originate. Understanding every cache layer is essential.

LAYER 1

Browser Cache

Client-side, user's browser. Controlled via Cache-Control response headers.

LAYER 2

Edge Cache

Vercel CDN at global PoPs. ISR and static pages cached here. Stale-while-revalidate supported.

LAYER 3

Data Cache

Next.js fetch() cache. Per-function, tag-based. Controlled with revalidate and tags options.

LAYER 4

Full Route Cache

Rendered HTML cached on CDN. Entire page output stored at the edge for instant delivery.

Caching Patterns

Force Cache (Default)

fetch('https://api.example.com/data')
// Cached indefinitely

When: Static data that never changes

Time-Based Revalidation

fetch('https://api.example.com/data', {
  next: { revalidate: 60 }
})
// Cache for 60 seconds, then revalidate

When: Content that updates periodically

No Cache

fetch('https://api.example.com/data', {
  cache: 'no-store'
})
// Always fresh

When: User-specific or real-time data

Tag-Based Revalidation

fetch('https://api.example.com/products', {
  next: { tags: ['products'] }
})
// revalidateTag('products') to invalidate

When: CMS content, on-demand updates via webhooks

⚠️ Common Anti-Patterns

Anti-Pattern	Problem	Fix
fetch() in a Client Component	Bypasses server-side cache, exposes API keys	Move to Server Component
cache: 'no-store' on every fetch	Every request hits origin — kills performance, costs money	Add appropriate revalidate
No cache tags	Can't do targeted on-demand revalidation	Add tags to related fetches
ISR without webhooks	Content updates not visible until revalidate expires	Add CMS webhook → revalidatePath
Caching user-specific data	User A sees User B's data	Add user ID to cache key or disable cache
Caching in Edge Middleware	Middleware runs every request — should not cache	Move caching to Serverless layer

Core Web Vitals

Direct SE conversation topic. Customers want to improve their scores and Vercel can help.

LCP (Largest Contentful Paint)

Target: ≤ 2.5s

Time until the largest image or text block is visible.

Common Causes:

Large hero images not optimised
Slow TTFB from SSR delay
Render-blocking resources

Vercel/Next.js Fixes:

Use next/image with priority on above-fold images
Preconnect to third-party origins
Use next/font for zero layout shift

CLS (Cumulative Layout Shift)

Target: ≤ 0.1

How much the layout shifts as content loads.

Common Causes:

Images without width/height
Fonts loading after text renders
Dynamically injected content

Vercel/Next.js Fixes:

next/image auto-sets aspect ratio
next/font loads inline — zero CLS
Reserve space for dynamic content

INP (Interaction to Next Paint)

Target: ≤ 200ms

How fast the browser responds to user input (replaced FID in 2024).

Common Causes:

Large JS bundles blocking main thread
Too many Client Components
Expensive third-party scripts

Vercel/Next.js Fixes:

Move Client Components down the tree
Code split with dynamic() imports
Defer scripts with next/script strategy='lazyOnload'

Full Study Guide →SE Resources →