← Back to SE Resources
Advanced Topics
🚀 Advanced Topics
The AI Cloud Layer, composable architecture, customer architecture patterns, and migration playbooks — the advanced knowledge that differentiates top SEs.
The AI Cloud Layer
Vercel's biggest strategic bet. As an SE in 2026, you need to understand and demo these tools.
Fluid Compute + AI = Cost Efficiency
LLM calls = mostly I/O wait. Traditional serverless bills for all wait time. Fluid Compute bills only ~10ms of actual CPU per call → 80-90% cost reduction for AI streaming routes.
Composable Architecture & Headless
Vercel positions itself as the presentation layer of a composable stack. A huge part of enterprise sales.
Frontend (Next.js on Vercel) connects to:
Headless CMSContentful, Sanity, Storyblok, Hygraph
E-commerceShopify, Commercetools, BigCommerce
SearchAlgolia, Elastic
AuthAuth0, Clerk, NextAuth
PaymentsStripe, Braintree
AnalyticsSegment, Mixpanel
MediaCloudinary, Mux
Common Customer Architectures
The patterns you'll encounter most in enterprise sales. Know how to draw and explain each.
E-commerce Pattern
Backend: Shopify / Commercetools| Route | Strategy | Description |
|---|---|---|
| /products/[slug] | ISR (1hr + webhook on update) | Product pages with on-demand revalidation |
| /collections/[slug] | ISR (15min) | Collection listings, periodic refresh |
| /cart | CSR (client-side) | Sensitive, user-specific cart data |
| /checkout | SSR (always fresh) | Auth required, real-time inventory |
| Edge Middleware | A/B testing | 50/50 homepage split, cookie-based |
Media / Publishing Pattern
Backend: Contentful / Sanity| Route | Strategy | Description |
|---|---|---|
| / (homepage) | ISR (5min or webhook) | Breaking news, editorial updates |
| /articles/[slug] | ISR (webhook + tags) | Tag-based revalidation on publish |
| /live | SSR (no cache) | Real-time ticker, always fresh |
| /search | SSR or CSR | User-specific search results |
| CMS Webhook | → revalidateTag('articles') | On-demand invalidation |
SaaS Dashboard Pattern
Backend: Clerk/Auth0 + Vercel Postgres/Supabase| Route | Strategy | Description |
|---|---|---|
| / (marketing) | SSG | Static marketing pages |
| /blog | ISR | Blog with CMS integration |
| /login | SSG | Just a static form |
| /app/* | SSR / RSC | Authenticated, user-specific data |
AI Application Pattern
Backend: AI Gateway → OpenAI/Anthropic + Pinecone/Qdrant| Route | Strategy | Description |
|---|---|---|
| /chat | RSC + useChat (AI SDK) | Streaming chat interface |
| /api/chat | Vercel Function (streaming) | LLM response via Fluid Compute |
| /api/search | Edge Function | Fast vector search at the edge |
| /api/agent | use-workflow (durable) | Long-running agent tasks |
Migration Patterns
You will be asked about migrations constantly. Know these playbooks.
Create React App → Next.js App Router
Common- Add Next.js alongside CRA (incremental adoption)
- Move routes one by one
- Identify SSG vs ISR vs SSR per route
- Replace API calls with Server Components where possible
- Add Middleware for auth (replace route guards)
- Migrate to next/image, next/font, next/link
Gatsby → Next.js
Medium- GraphQL data layer → Server Components with direct data fetching
- Gatsby static generation → Next.js SSG/ISR
- Gatsby plugins → Next.js equivalents or direct integrations
Self-hosted Next.js → Vercel
Easy- Usually zero code changes — point DNS to Vercel
- Gain: ISR distributed globally (not single-region)
- Gain: Preview deployments for every PR
- Gain: Zero-config builds + Skew Protection
- Gain: Automatic image optimisation at CDN level
Pages Router → App Router
Incremental- Migrate one route at a time (pages/ and app/ coexist)
- getServerSideProps → async Server Components
- getStaticProps → SSG Server Components
- Data fetching moves from page-level to component-level