16. Composable Architecture & Headless Integrations
A huge part of enterprise sales. Vercel positions itself as the presentation layer of a composable stack.
16.1 The composable architecture model
Frontend (Next.js on Vercel)
│
├── Headless CMS (Contentful, Sanity, Storyblok, Hygraph)
├── E-commerce (Shopify, Commercetools, BigCommerce)
├── Search (Algolia, Elastic)
├── Auth (Auth0, Clerk, NextAuth)
├── Payments (Stripe, Braintree)
├── Analytics (Segment, Mixpanel)
└── Media (Cloudinary, Mux)
16.2 Headless CMS + ISR pattern (the most common enterprise pattern)
// 1. Fetch content from headless CMS with tag-based caching
export default async function BlogPost({ params }) {
const post = await fetch(
`https://cdn.contentful.com/spaces/${SPACE_ID}/entries/${params.slug}`,
{ next: { tags: ['blog', `blog-${params.slug}`] } }
);
return <Article post={post} />;
}
// 2. CMS webhook calls this when content is published
export async function POST(request) {
const { slug } = await request.json();
revalidateTag(`blog-${slug}`); // only regenerate the changed post
return Response.json({ ok: true });
}
16.3 Commerce patterns
// Product page: ISR for product data, SSR for cart/inventory
export default async function ProductPage({ params }) {
// Static product data — revalidate every hour
const product = await getProduct(params.id, { revalidate: 3600 });
return (
<>
<ProductDetails product={product} />
<Suspense fallback={<InventoryLoading />}>
{/* Streamed in — always fresh */}
<LiveInventory productId={params.id} />
</Suspense>
</>
);
}