🏗️ Platform Fundamentals

The Vercel Platform — Mental Model

Vercel is a Developer Experience (DX) Platform — not just hosting. Four layers:

Compute — The Three Runtimes

Vercel Functions come in two runtimes. Understanding the difference is essential for every architecture conversation.

Fluid Compute — The 2025 Game Changer

Vercel's biggest architectural evolution. Enabled by default for new projects from April 23, 2025.

Next.js Rendering Strategies

The core technical topic for any Vercel SE. Know when to use each and diagnose when a customer is using the wrong one.

// Default in App Router for pages without dynamic data
export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache'
  });
  return <div>{data.content}</div>;
}

// Time-based revalidation
export default async function Page() {
  const data = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // regenerate after 1 hour
  });
  return <ProductList products={data} />;
}

export const dynamic = 'force-dynamic';

export default async function Page({ searchParams }) {
  const user = await auth();
  const data = await db.query(
    'SELECT * FROM orders WHERE user_id = $1',
    [user.id]
  );
  return <Dashboard orders={data} />;
}

// Server Component (default) — zero client JS
async function ProductDetails({ id }) {
  const product = await db.getProduct(id);
  return <div>{product.name}</div>;
}

// Client Component — for interactivity
'use client';
function AddToCart({ productId }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c + 1)}>Add</button>;
}

Decision Matrix