17. Common Customer Architectures
These are the patterns you'll encounter most often in enterprise sales. Know how to draw and explain each.
17.1 The E-commerce Pattern
Shopify / Commercetools (product catalogue, inventory, cart, checkout)
│
Next.js on Vercel
├── /products/[slug] — ISR (1hr revalidation + webhook on product update)
├── /collections/[slug] — ISR (15min revalidation)
├── /cart — CSR (client-side only, sensitive)
├── /checkout — SSR (must be fresh, auth required)
└── /account — SSR (auth required)
│
Edge Middleware
└── A/B testing on homepage — 50/50 split, cookie-based
17.2 The Media / Publishing Pattern
Contentful / Sanity (content)
│
Next.js on Vercel
├── / (homepage) — ISR (5min or webhook on publish)
├── /articles/[slug] — ISR (webhook on publish, tags: ['articles', 'article-{slug}'])
├── /live — SSR (real-time ticker, no cache)
└── /search — SSR or CSR (user-specific)
│
CMS Webhook → /api/revalidate → revalidateTag('articles')
17.3 The SaaS Dashboard Pattern
Next.js on Vercel
├── / (marketing) — SSG
├── /blog — ISR
├── /login — SSG (just a form)
└── /app/* — SSR / RSC (authenticated, user-specific)
│
Auth provider (Clerk / Auth0)
Database (Vercel Postgres / PlanetScale / Supabase)
17.4 The AI Application Pattern
Next.js on Vercel (Fluid Compute)
├── /chat — RSC + useChat (AI SDK)
├── /api/chat — Vercel Function (streams LLM response)
├── /api/search — Edge Function (vector search, fast)
└── /api/agent — Vercel Function with use-workflow (durable)
│
AI providers (OpenAI / Anthropic / Gemini via AI Gateway)
Vector DB (Pinecone / Qdrant)