Stripe's real-time Black Friday microsite on Vercel

In 2023, businesses processed more than $18.6 billion on Stripe over Black Friday and Cyber Monday (BFCM).

This year, just 19 days before Black Friday, Stripe asked a question: "What if?" What if they opened up Stripe's core metrics and gave a detailed look into their core business, reliability, and the reach of their products?

In response, employees from across the company came together to construct a real-time, publicly accessible microsite that dynamically showcased Stripe's reliability, transaction volumes, global activity, and more, during BFCM—and they showcased it all on Vercel.

By leaning on Vercel's framework-defined infrastructure, the Stripe team was able to focus on design, performance, and reliability rather than on architecting a dynamic cache system from scratch in 19 days.

Stripe built a live experience in record time, allowing viewers to see never-before-seen real-time transaction data. By harnessing Vercel's robust infrastructure and cutting-edge technologies like Next.js, SWR, and ISR, the result was a flawlessly performing microsite.

Stripe needed to strike a balance between a fast initial page load and responsive user interactions while effectively managing the application's dynamic components.

At first, they considered a per-client WebSocket approach to handle the real-time updates. However, given the tight timelines and the expected load, they opted for a solution of polling a backend cache while frequently rehydrating that cache—SWR facilitated real-time interactions on the client side, while ISR ensured that dynamic content updates occurred without directly querying the backend for every request.

Let's break it down further:

Stripe chose a one-second max-age cache, enabling the application to deliver static pages with minimal backend queries, ensuring the system's capability to efficiently handle millions of requests during peak times by updating content in the background while users accessed static pages.

This combined strategy effectively decreased the backend load by redirecting traffic to Vercel's cache network and utilizing ISR for background data generation. The result was a seamless user experience, enabling the real-time update of the counter without sacrificing overall performance.

Stripe is known for their unwavering dedication to their infrastructure's . Across BFCM, Stripe handled a peak volume of 93,304 transactions per minute, while maintaining API uptime greater than 99.999%. This campaign had to not only showcase that reliability but also operate with the strictest of security measures to ensure no risk entered into the Stripe ecosystem.reliability

Everything isolated: API-first approach to securing the core business

First, the team ensured complete isolation of the microsite’s data sources from core Stripe infrastructure. This deliberate separation served as a safeguard, guaranteeing that even in the face of any issues, any impact would be confined to an isolated endpoint.

Fallback Strategy: Navigating the Unknown

In the realm of real-time data streaming, where novel metrics were being presented for the first time, the team acknowledged the need for a robust fallback strategy. Should a metric fail to update or cease to provide results, meticulous planning was put in place to detect and mitigate those scenarios.

By teaming up with Vercel, Stripe's innovative BFCM microsite provided a unique, live insight into Stripe's operational reliability, showcasing an impressive handling of high transaction volumes while ensuring exceptional API uptime. In 19 days, the rapid and successful execution of this project not only emphasizes Stripe's role as a leader in innovation, but also establishes a new benchmark for efficiency in the fintech sector.

Read more

Optimizing for the unique challenges of a viral real-time microsite

Ensuring reliability and uncompromising safety

• Fetched static data during build time, ensuring that the essential data required for the initial page load is pre-fetched and rendered.:getStaticProps (gSP)

• Managed the real-time data and interactions on the side, allowing the application to display the latest data to users while simultaneously triggering a background revalidation process. This ensured that the data remained up-to-date without causing excessive load on the backend.Stale-While-Revalidate (SWR):client

• Automated revalidation of the static content from gSP and SWR, propagated and seeded throughout the entire Vercel Edge Network automatically.Incremental Static Regeneration (ISR):