{sub?.plan ?? 'None'} {c.$createdAt} ) }))} ) } ``` The pattern is the same for every page. Blog listing pulls from `Post.find()`. Pricing page pulls plan data from `Product.find()` and `Price.find()`. Customer portal pulls subscription status from `Subscription.findOne()`. Contact form submissions call `Contact.create()` and `Form.submit()`. Every interaction flows through the typed graph. Vercel renders the result. For ISR (Incremental Static Regeneration), the pattern is identical -- Server Components that call the SDK, cached at the edge by Vercel's CDN, revalidated on a schedule or on-demand when the underlying entity changes. A blog post updated in the typed graph triggers an on-demand revalidation webhook to Vercel, and the cached page regenerates with the new content. ## Event Capture from the Frontend The headless.ly browser SDK captures events from Vercel-deployed pages and forwards them to the typed graph. Page views, button clicks, form submissions, and custom events all flow into the Event entity, stored as parquet in R2, queryable alongside every other entity in the graph. ```typescript // components/pricing-cta.tsx — Client Component with event tracking 'use client' import { track } from '@headlessly/js' export function PricingCTA({ plan }: { plan: string }) { return ( ) } ``` The browser SDK forwards events to both the headless.ly lakehouse and, through [progressive decoupling](/blog/integrations/posthog-is-the-training-wheels), to Google Analytics and PostHog. The lakehouse stores the event as a typed Digital Object connected to the Contact (if identified) and the session. The external analytics tools receive the same event for their dashboards and funnels. Over time, the lakehouse replaces the external tools. The browser SDK does not change. ## Forms and Lead Capture A marketing site deployed on Vercel needs forms. Contact forms, demo request forms, newsletter signups, waitlist entries. In the 14-tool SaaS stack, these forms submit to Typeform or Google Forms, which connect to Zapier, which pushes to HubSpot, which syncs to Mailchimp. Four tools for one form submission. In the typed graph, the form submits directly to headless.ly: ```typescript // app/api/contact/route.ts — Next.js API route on Vercel import { Contact } from '@headlessly/crm' import { Form } from '@headlessly/marketing' import { Event } from '@headlessly/analytics' export async function POST(request: Request) { const body = await request.json() const contact = await Contact.create({ name: body.name, email: body.email, stage: 'Lead', source: 'website', data: { company: body.company, role: body.role }, }) await Form.submit({ form: 'form_pQ8wR3nKx', contact: contact.$id, data: body, }) await Event.create({ type: 'form_submitted', source: 'website', contact: contact.$id, data: { form: 'contact', page: '/contact' }, }) return Response.json({ id: contact.$id }) } ``` The Contact is created in the [CRM](https://crm.headless.ly). The Form submission is recorded in [marketing](https://marketing.headless.ly). The Event is logged in [analytics](https://analytics.headless.ly). Three entities in one graph, created from one form submission, with no external tools and no [Zapier bridge](/blog/integrations/zapier-is-the-bridge). The sales agent Sally can see the new lead immediately. The marketing agent Mark can attribute it to the correct campaign. The analytics graph connects it to the page view that preceded it. ## Why Vercel, Not Cloudflare Pages headless.ly itself runs on [Cloudflare](/blog/integrations/cloudflare-is-the-substrate). The documentation site runs on Cloudflare Pages. But for customer-facing frontends, Vercel offers three capabi