Framework-Defined Infrastructure

11/10/2025

This post introduces and defines the concept of 'Framework-Defined Infrastructure' (FDI) as Vercel's core strategy to combat vendor lock-in. It explains how Vercel interprets framework code to provision infrastructure automatically, eliminating the need for developers to interact with Vercel-specific APIs or modules. The post contrasts this with vendor-specific primitives found on platforms like AWS and Cloudflare, highlighting how FDI ensures code portability across different environments. It also discusses the benefits for local development, the widespread adoption of Next.js outside of Vercel, and the role of Next.js Build Adapters in formalizing the framework-platform contract. The post also touches on Vercel's commitment to standards in areas like databases and AI Gateways, and its development of proprietary services like Vercel Sandbox and Edge Config.

5/21/2025

Vapi rebuilt their MCP server on Vercel using the new Vercel MCP Adapter. This adapter simplifies MCP server deployment for Node.js frameworks and supports multiple transport protocols (SSE, Streamable HTTP). Vapi leveraged Vercel's Fluid Compute for optimized resource utilization and plans to integrate with Vercel's Observability and Firewall features.

5/15/2025

This post details how Fern built a multi-tenant documentation platform on Vercel, leveraging Vercel Middleware for dynamic routing and custom domain support. It also highlights the migration of backend services to Vercel Functions, reducing deploy times from 30 minutes to 5 minutes, and the performance improvements gained from migrating to Next.js App Router, including 50-80% faster load times and 3x faster time to first byte.

5/14/2025

Consensys migrated MetaMask.io from SSG on GitHub Pages to Next.js with Server-Side Rendering (SSR) and Vercel. This involved rebuilding the site to improve operational reliability, scale, speed, and continuous iteration. The new architecture leverages Vercel's global edge network for static assets and Vercel Functions for dynamic endpoints, incorporating features like Incremental Static Regeneration (ISR) and smart caching for dynamic content and live data. The migration also improved developer experience through preview URLs with inline commenting and concurrent builds.

4/15/2025

This post details how Vercel's application-aware routing, powered by framework-defined infrastructure, optimizes request handling. It explains the concept of domains as aliases to deployments, the de-aliasing process for request fulfillment, and how the WAF is made application-aware. It also highlights the benefits of instant global propagation for rollouts and rollbacks due to the software-layer handling of routing.

3/7/2025

This post details how Next.js and Vercel enable effective personalization by combining hybrid rendering, Edge Middleware, and feature flags. It explains architectural personalization (tailoring site structure and experience) and content personalization (tailoring displayed content), highlighting common mistakes like over-reliance on client-side rendering and inefficient content management. The post emphasizes Vercel's role in providing tools for performance-focused personalization, including Middleware for network-level adjustments, the Flags SDK for feature flagging, Speed Insights, caching, lazy loading, preview deployments, and marketplace integrations with personalization engines.

2/24/2025

This post details how Avanade leveraged Vercel and Next.js to achieve significant performance improvements and accelerate development. It highlights the benefits of Vercel's platform, including edge computing, automatic scaling, and CI/CD workflows, in conjunction with Next.js's rendering strategies (SSR, SSG, ISR). The post also mentions Vercel Functions for backend logic, leading to a decrease in carbon emissions. It quantifies user experience improvements such as increased site visits, returning visitors, and conversions, as well as developer experience improvements like faster site development and content delivery. The adoption of a headless architecture with Sitecore XM Cloud is also noted.

1/7/2025

This post details an incremental migration strategy from Salesforce Commerce Cloud to a headless architecture using Next.js and Vercel. It highlights the use of Edge Middleware for traffic control and gradual rerouting, session synchronization techniques (encrypted cookies, JWTs), SEO preservation strategies, and mitigating Salesforce API challenges through granular data fetching and caching with Incremental Static Regeneration (ISR). The post also presents performance metrics (TTFB, FCP, LCP, INP, CLS), productivity improvements (deployment/rollback times), and business impact (reduced cart abandonment, increased conversion rates, zero downtime during peak traffic).

11/21/2024

This post details the lifecycle of a Vercel request, focusing on the Edge Network's role in routing and optimization. It introduces 'Edge Requests' as requests that pass platform defenses and WAF actions, emphasizing their purpose in fetching data or triggering events and how Vercel enriches them with contextual data for Edge Middleware and Vercel Functions. It also explains 'Fast Data Transfer (FDT)' as the low-latency movement of data between users and the Vercel Edge Network, supported by PoPs and private fiber connections, bypassing public internet bottlenecks for secure, high-speed data transfer. The post highlights how these concepts contribute to delivering better user experiences and reducing costs by optimizing request frequency and type.

11/13/2024

This post details the request lifecycle on Vercel, from the initial user request hitting the Edge Network and Vercel Firewall (including L3/L4 and WAF protections) to advanced routing via Edge Middleware, redirects, and rewrites. It emphasizes how framework code influences infrastructure provisioning and request handling, linking to existing concepts like framework-defined infrastructure and Vercel Firewall.

9/27/2024

This post elaborates on Vercel's 'framework-defined infrastructure' by emphasizing how it empowers teams to focus on writing framework code instead of infrastructure as code. It highlights that Vercel's understanding of cloud and frameworks allows it to automatically provision, deploy, connect, secure, scale, and manage infrastructure based on the application's code. This shift transforms team dynamics by eliminating infrastructure as an obstacle, enabling faster development cycles, smoother workflows, and increased collaboration between frontend and backend teams. The post also touches upon how this enables teams to be more strategic, focus on finer details of UX, and ultimately drive more business value by reducing time spent on infrastructure management and code deployment.

9/20/2024

This post elaborates on the concept of 'frontend clouds' and how they address the limitations of traditional CDNs and IaC for modern web applications. It highlights the shift towards full-stack development enabled by meta-frameworks and introduces 'framework-defined infrastructure' as a core principle of Vercel's frontend cloud. The post explains how Vercel's platform translates framework code into infrastructure, abstracting away complexity and enabling developers to consistently achieve speed, global presence, scalability, dynamism, reliability, and security. It emphasizes the blurring of lines between development and infrastructure, where code-level optimizations directly translate to infrastructure-level enhancements.

4/10/2024

Teleport migrated their documentation and website to Next.js and Vercel, leveraging serverless hosting for automated deployments and preview environments. This migration improved build times by over 60% and enabled 3x more concurrent builds, enhancing developer velocity and collaboration. The platform also provided enhanced security through Vercel's Firewall and DDoS mitigation, and streamlined access management with SSO integration.

1/16/2024

This post details how Stripe leveraged Vercel's framework-defined infrastructure, Next.js, SWR, and ISR to build a real-time microsite for Black Friday. Key technical decisions included opting for polling a backend cache with frequent rehydration over per-client WebSockets due to tight timelines and expected load. SWR was used for client-side real-time data management and background revalidation, while ISR automated revalidation of static content and propagated it across the Vercel Edge Network. A one-second max-age cache was chosen to balance fast initial loads with efficient handling of millions of requests by updating content in the background. The post also highlights Stripe's focus on isolation of the microsite's data sources from core infrastructure and a fallback strategy for real-time data streaming.

12/21/2023

This post elaborates on Vercel's Frontend Cloud, emphasizing its developer experience (DX) platform. It details how framework code is transformed into globally served applications via framework-defined infrastructure (FdI) and Git-based workflows, resulting in immutable deployments for every git push. It highlights the observability features, providing real-time insights into application performance for actual users through monitoring, performance tracking, and user traffic analysis, with per-deployment granularity. Collaboration is enhanced through role-based access, shareable preview deployments, Figma-like commenting, and direct-on-page editing of CMS content. The concept of unlimited deployment environments is explained, allowing for distinct configurations and domain assignments, exemplified by localized website deployments. The post also discusses decoupling deploys from releases, enabling extensive testing and iterative workflows, and the use of feature flags for controlled rollouts. Finally, it advocates for monorepos as the optimal code architecture for frontends, promoting reusability and efficiency.

11/21/2023

This post introduces the concept of the Frontend Cloud and its foundational elements, including framework-defined infrastructure (FdI) and serverless architecture. It explains how the Frontend Cloud provisions global infrastructure based on existing application code, contrasting it with traditional backend-centric approaches. The post defines 'Frontend' broadly to include all components communicating directly with external clients, encompassing UI, client-side code, API services, CDNs, ingress firewalls, server-side rendering, and specialized services like image optimization. It advocates for decoupling the frontend from the backend to enable faster iteration, independent scaling, and improved developer experience, suggesting a middleware API layer for reconnection.

11/9/2023

Introduces Partial Prerendering (PPR) as an experimental rendering model for Next.js 14 on Vercel. PPR combines static edge delivery with dynamic capabilities by leveraging React Suspense boundaries. It generates a static shell for pages, with dynamic content rendered within Suspense fallbacks. PPR is implemented using React's streaming architecture and builds upon Incremental Static Regeneration (ISR) and Server-Side Rendering (SSR). It aims to eliminate trade-offs between static and dynamic rendering by allowing developers to define which parts of a page are static or dynamic. The feature is available for experimentation with Next.js 14 Canary and can be integrated into other frameworks via Vercel's Build Output API.

11/6/2023

This post elaborates on Vercel's Frontend Cloud, highlighting its role in building secure and performant web applications. It details the iterative development workflow, including preview deployments and decoupling deploys from releases with Edge Middleware. It also covers seamless API and database integrations, authentication mechanisms, API gateway features, Secure Compute for private connections, scalable serverless compute, and built-in monitoring capabilities. The post emphasizes how these features contribute to peak scalability, reliability, developer productivity, and exceptional performance for web applications.

10/11/2023

This post details Tekla's migration from Gatsby Cloud to Vercel and from WooCommerce to Medusa. It highlights the benefits of Vercel's platform for handling high traffic, providing reliable performance, and offering flexibility and scalability for e-commerce needs. The adoption of Next.js is also mentioned as a future plan for faster web deployments on Vercel, aiming to further enhance user experience and sales.

10/5/2023

Introduced Spend Management features including email/web/SMS notifications for spend thresholds, flexible webhooks for real-time usage updates, and automatic project pausing. Added APIs for programmatic project pausing/resuming. Updated Vercel Functions to support up to 5-minute durations on Pro plans (15 on Enterprise) with safer 15-second defaults, building on previous recursion protection.

8/17/2023

This post details how Sonos migrated to Vercel and Next.js, resulting in a 75% improvement in build times and a 10% improvement in performance scores. It highlights the challenges Sonos faced with their previous infrastructure, including long build times, lack of Next.js feature support (Edge Middleware, ISR), cache management issues, and poor observability. The migration to Vercel addressed these by providing a unified Frontend Cloud experience, improved monorepo support, and seamless integration with Next.js features. The post also mentions the use of Vercel's Preview Deployments, Web Analytics, and built-in logging for better developer experience and site performance.

8/15/2023

This post details how Konabos, a digital agency, partnered with American Bath Group to migrate their digital infrastructure from a monolithic setup to a composable stack using Vercel, Next.js, and Kontent.AI. Key technical achievements include reducing build times from 30 hours to 3 minutes and achieving 50% faster deployments. The post also mentions the use of Vercel's Preview Deployments for iterative feedback and stakeholder alignment.

6/20/2023

This post details the integration of Vercel's framework-defined infrastructure (FDI) with SvelteKit, enabling features previously exclusive to Next.js. Key contributions include: support for per-route configuration of Serverless and Edge Functions, Incremental Static Regeneration (ISR) for SvelteKit routes, and enhanced compatibility with Vercel products like Web Analytics. It explains how SvelteKit adapters facilitate FDI by providing deployment environment-specific information. The post outlines per-route data fetching and rendering options (SSR, SSG, ISR) and function runtime choices (Node.js, Fluid compute). It provides an example of configuring ISR with an `expiration` time and mentions the `bypassToken` for cache management. It also highlights other Vercel gains for SvelteKit users, including Edge Config, Vercel KV, Postgres, Blob storage, preview deployments with commenting and visual editing, and native analytics.

6/15/2023

This post details how Potion.so, a Notion-to-website builder, utilized Vercel's Frontend Cloud, specifically the Platforms Starter Kit and Edge Network, to scale their operations and manage custom domains for over 4,000 users. It highlights the use of Server-Side Rendering (SSR) for performance and SEO, and Incremental Static Regeneration (ISR) for caching to prevent database overload. The narrative emphasizes the ease of setting up wildcard and custom domains, enabling Potion to focus on feature development rather than infrastructure configuration.

5/5/2023

This post details how Clerk has optimized its authentication system for Vercel's frontend cloud architecture. Key contributions include: developing framework-specific SDKs (e.g., for Next.js App Router with RSC support), offering drop-in authentication components like `<SignIn/>` and `<UserProfile/>`, and implementing stateless session management using JWTs for under one millisecond authentication at the edge. It also explains how Clerk facilitates composability through JWT SSO and JWT templates, allowing services to securely identify end-users without relying on traditional secret keys.

3/22/2023

This post introduces an advanced integration for Remix on Vercel, enabling streaming SSR with both Node.js and Edge runtimes on a per-route basis. It details how Remix applications can leverage Vercel's caching capabilities with headers like `stale-while-revalidate` and `stale-if-error`. The integration abstracts away runtime-specific needs, allowing `@vercel/remix` to replace `@remix-run/node` for a more streamlined experience. It also highlights the use of `defer()` and `<Await>` for dynamic content streaming and the potential for sub-100ms latency for dynamic server-rendered pages.

3/7/2023

This post introduces and explains the concept of Framework-Defined Infrastructure (FdI) as an evolution of Infrastructure as Code (IaC). It details how FdI allows frameworks to automatically infer and provision the necessary infrastructure based on application code and framework conventions, rather than requiring explicit IaC configuration. Examples are provided using Next.js to illustrate how different code patterns (e.g., `getServerSideProps` vs. `getStaticProps`) translate to different infrastructure deployments (serverless functions vs. static file serving). The post also touches upon how FdI applies to other frameworks like Gatsby, SvelteKit, and Remix, and how it integrates with Vercel's Build Output API.

2/22/2023

This post details how Globacore, a digital agency, leveraged Vercel's platform and Next.js to transition from creating physical interactive experiences to building web-based digital experiences within two months. It highlights the use of Vercel's Global Edge Network for edge computing and caching to ensure fast global response times and meet 99.99% uptime SLAs. The post also emphasizes the benefits of Next.js's fast refresh for rapid iteration and Vercel's Preview Deployments for client collaboration, effectively acting as their DevOps department.

2/1/2023

This post details how Super.so leverages Next.js and Vercel to serve over 15,000 custom domains from a single codebase. Key technical contributions include the programmatic management of custom domains using Vercel's Domains API, enabling users to add/remove domains and detect/update configurations in real-time. The post highlights the use of Incremental Static Regeneration (ISR) for performance and reduced database load, and Edge Middleware for custom routing and moving server-side logic to the edge. It also emphasizes Vercel's GitHub integration for automated deployments and preview URLs, and the ability to connect multiple domains to a single project.

1/27/2023

This post details Vercel's infrastructure for building and deploying serverless applications, focusing on the "build" and "request" phases. It explains the process of uploading project files, creating deployments via the CLI or Git integration, and the role of builders in transforming code into Vercel deployments. It highlights the provisioning of Vercel Functions, Edge Functions, and optimized images. The request phase is described as utilizing anycast routing to the nearest edge location, which then routes requests through a Kubernetes cluster and reverse proxy to determine the correct deployment and resource to serve, including handling static resources, Vercel Functions, and Edge Functions.

9/14/2022

This post details the introduction of the `app` directory in Next.js, which redefines routing and layout management. Key features include folder-based routing, `page.js` for route UI, `layout.js` for shared and nested layouts, `loading.js` for Suspense-based loading states, `error.js` for error boundaries, and route groups for organizing routes without affecting URLs or opting out of layouts. The post demonstrates incremental adoption from the `pages` directory and provides code examples for creating routes, layouts, and handling nested structures.

8/29/2022

This post details how Integral Studio leveraged Vercel and Next.js to build and scale digital experiences for artists like SZA. It highlights the ease of deployment and iteration, the seamless upgrade path from older versions of Next.js to newer ones, and the platform's ability to handle significant traffic spikes. The post also touches on the evolution of Vercel's infrastructure from custom servers to a fully serverless model, simplifying infrastructure needs.

7/28/2022

This post details how to build a custom React-based web framework using the Vercel Build Output API. It covers implementing features such as static file generation with hydration scripts, Incremental Static Regeneration (ISR) using Prerender Functions, Vercel Functions for dynamic rendering and data fetching, automatic image optimization, and Edge Caching. The post provides code examples for creating static HTML files and client bundles, and explains the structure of the output for Vercel deployment.

7/21/2022

Introduced the Build Output API, a file-system-based specification allowing any framework to build for Vercel and leverage Vercel's infrastructure primitives (Edge Functions, ISR, Image Optimization, etc.). Added `vercel build` to the CLI for local build debugging and inspection, and `vercel deploy --prebuilt` to decouple the build step from deployment, enabling deployment of pre-built outputs without sharing source code. This empowers framework authors to integrate Vercel's infrastructure primitives more easily.

6/28/2022

This post announces the general availability of Vercel Edge Middleware for Next.js and its public beta for all frameworks. It highlights its ability to run before the Edge Network Cache for fast rewrites and redirects, enabling dynamic routing, experimentation (A/B testing, personalization), localization based on geolocation, and authentication at the edge. It also mentions the integration with Next.js 12.2 and provides examples for A/B testing, localization, and authentication.

8/7/2019

Introduced 'Zero Config' deployments, a conventional and backwards-compatible approach that automatically deploys static websites and serverless functions for any framework or tool with a `package.json` and build script. This eliminates the need for `vercel.json` configuration for common use cases, including frontend frameworks like Next.js, Gatsby, Vue, Ember, and Svelte, as well as serverless functions placed in an `api` directory.