Vercel Caching

Zero-config performance with ISR, edge caching, and on-demand revalidation. Deploy once, update instantly, scale globally.

Vercel pioneered the modern frontend deployment experience with intelligent caching that requires zero configuration. When you deploy to Vercel, your Next.js application automatically benefits from a sophisticated caching layer that spans 100+ edge locations worldwide. This means your static content is served from the closest server to your users, while dynamic content can be updated on-demand without redeploys.

Whether you're running a small marketing site or a large-scale application with millions of pages, Vercel's caching infrastructure adapts automatically, giving you the performance of a static site with the flexibility of dynamic content. For teams building web applications, this means your users get sub-50ms response times globally while your content team can update CMS content instantly. These performance gains directly impact your search engine rankings, as page speed is a key ranking factor. For complex applications using monorepo setups, caching can be configured per workspace for granular control.

Vercel's Caching Pillars

Four interconnected systems that work together for optimal performance

Incremental Static Regeneration

Build pages once, cache globally, regenerate on-demand. Static performance with dynamic flexibility.

On-Demand Revalidation

Trigger instant cache invalidation via API when your data changes. No redeploys required.

Edge Caching

100+ global edge locations serve cached content from the closest server to your users.

Cache Tags

Group related content and invalidate it all at once. Efficient content management at scale.

Understanding Vercel's Caching Architecture

Vercel's multi-layer caching system combines build-time static generation with runtime cache invalidation to deliver optimal performance without complex configuration.

How ISR Works Under the Hood

When a page is built, it's rendered once and then cached across Vercel's entire edge network. Subsequent visitors receive the cached version instantly from the nearest edge location. The key innovation is that this cached content can be invalidated and regenerated in the background without redeploying the entire site.

The request flow:

  1. User requests a page from the nearest edge location
  2. If cached, content is served instantly (< 50ms globally)
  3. If stale, background regeneration is triggered
  4. Next user receives fresh content while regeneration completes

Time-Based Revalidation

The simplest form of cache invalidation - set a time interval after which content automatically regenerates. Ideal for content that updates on a predictable schedule.

Time-Based Revalidation
1// Time-based revalidation in fetch2export async function getData() {3 const res = await fetch('https://api.example.com/data', {4 next: { revalidate: 3600 } // Cache for 1 hour5 })6 return res.json()7}8 9// Page-level revalidation10export const revalidate = 3600 // Revalidate every hour11 12// Per-request dynamic rendering13export const dynamic = 'force-dynamic'
Assigning Cache Tags
1import { cacheTag } from 'next/cache'2 3export async function getBlogPosts() {4 const posts = await fetch('https://cms.example.com/posts', {5 next: { tags: ['posts', 'blog-content'] }6 })7 return posts8}9 10export async function getProduct(slug: string) {11 const product = await fetch(`https://cms.example.com/products/${slug}`, {12 next: { tags: ['products', `product-${slug}`] }13 })14 return product15}
Revalidation Webhook Handler
1import { revalidateTag } from 'next/cache'2import { NextRequest, NextResponse } from 'next/server'3 4export async function POST(request: NextRequest) {5 // Verify webhook signature for security6 const signature = request.headers.get('x-cms-signature')7 if (!verifySignature(signature, request.body)) {8 return new NextResponse('Unauthorized', { status: 401 })9 }10 11 const body = await request.json()12 const { contentType, slug } = body13 14 // Invalidate based on content type15 switch (contentType) {16 case 'post':17 revalidateTag('posts')18 revalidateTag(`post-${slug}`)19 break20 case 'product':21 revalidateTag('products')22 revalidateTag(`product-${slug}`)23 break24 case 'all':25 revalidateTag('posts')26 revalidateTag('products')27 break28 }29 30 return NextResponse.json({ revalidated: true })31}

Vercel Edge Network

100+ worldwide

Edge Locations

<50ms (typical)

Latency

0for basic caching

Config Required

Frequently Asked Questions

Does ISR work with the App Router?

Yes. ISR is fully supported in the App Router via the revalidate option in fetch requests and the export const revalidate statement in page files.

How does on-demand revalidation differ from time-based?

Time-based revalidation regenerates content at fixed intervals. On-demand revalidation triggers immediate regeneration when you call revalidateTag() or revalidatePath().

Are preview deployments cached separately?

Yes. Each deployment (preview or production) gets its own isolated cache. Changes in a preview won't affect production caches.

Can I clear the entire cache at once?

Yes. You can call revalidateTag() with a global tag that all your content uses, or trigger a full deployment which automatically invalidates all cached content.

Deploy with Confidence

Vercel's intelligent caching system delivers static site performance with dynamic content flexibility. Zero configuration required--just deploy and let the edge network handle the rest. Our [web development team](/services/web-development/) can help you optimize your deployment pipeline for maximum performance.