March 2023 Summaries

The French company Shotgun, which manages online ticketing for artists and their fans, previously relied on Heroku but switched to Vercel as its frontend platform, allowing it to scale more efficiently during traffic spikes. With Vercel's serverless autoscaling, deployment branches that automatically provision upon each `git commit`, Edge Config for quickly configuring new waiting rooms, and Cron Jobs for simplifying setup, Shotgun can now focus on innovating and building products rather than spending time on DevOps. The company has also expanded its user base to the US and Brazil, relying on features like Edge Middleware and Vercel Analytics to fine-tune cookie handling and track site performance in real-time, enabling better optimization for these new markets.

Google Optimize has announced that it will be sunset on September 30, 2023. Vercel is ready to help users continue their research with higher performance, more control, and better data by leveraging the edge. The Vercel Edge Network can introduce high-performance testing engine capabilities, eliminating issues like cumulative layout shift (CLS) hurt by Google Optimize's scripts being loaded on every page. With Vercel Edge Config and Edge Middleware, users can replicate and enhance Google Optimize's experimenting functionality, reducing CLS by 50% in some cases. The platform also allows for faster experimentation with sub-millisecond configuration read times, modernizing the experimentation stack, and introducing a powerful platform for testing needs.

next/font` is a reliable solution for using custom fonts in Next.js applications, eliminating complex workarounds and reducing code complexity. It automatically optimizes font loading with self-hosting, preloading only the characters needed, and preventing layout shift entirely by calculating the size-adjust property based on actual font files. With `next/font`, users can easily add new fonts and integrate them seamlessly into their site's design, enhancing typographical performance without the baggage associated with custom fonts.

Vercel has recently become the first serverless computing provider to offer stable support for HTTP response streaming in both Node.js (Lambda) and Edge runtimes, enabling developers to build high-performance web applications with a focus on speed, scalability, and efficient resource usage. By using HTTP streaming, developers can significantly boost their web app's performance and user experience by reducing response latency, improving TTFB, and enhancing overall responsiveness. This capability is particularly beneficial for larger or dynamically generated data as it eliminates the need to wait for the entire payload to be generated, cutting down on memory usage and boosting rendering performance. Vercel's custom solution enables streaming support in its serverless architecture, allowing developers to take advantage of this technology with Next.js Route Handlers, React Server Components, Remix Streaming SSR, SvelteKit, or SolidStart, thereby further enhancing the performance of applications hosted on Vercel.

A high-performance experimentation engine was built for vercel.com using Next.js and Vercel Edge Config. The goal was to create a culture of growth by leveraging A/B testing and experiments, while minimizing impact on end-users. The engine uses Edge Config to read dynamic data close to users, allowing for fast page loads with zero Cumulative Layout Shift (CLS). It also provides a standardized path to effective, high-performance experiments, including type safety, pre-rendering experiment variations, and dynamic routing. The engine's data fetching utilities ensure that users end up on the correct page variations, while its React context makes it easy to track analytics and collect data about experiments. With this engine, vercel.com can ship and iterate on experiments quickly and safely, without sacrificing performance or user experience.

Nathan Rajlich and Ethan Arrowood from Remix announced an advanced integration with Vercel, which includes support for Streaming SSR, API Routes, Advanced Caching, Data Mutations, and Deploying a Remix template. This integration is designed to work seamlessly with Vercel's serverless environment, including both Node.js and Edge runtimes. The team has abstracted away runtime-specific needs, making it easily consumable. They are collaborating with the Remix team to contribute changes back upstream and make the build outputs more modular. With this advanced integration, applications can now choose their runtime on a per-route basis, allowing for the best parts of both Node.js and Web APIs in one application on one platform. Vercel supports caching loader responses using its Edge Network Cache, providing cache-control headers like stale-while-revalidate and stale-if-error. This integration also enables isomorphic support for streaming in both Node.js and Edge runtimes, with powerful Remix features like defer() and <Await>, built on top of React 18 and Suspense. The goal is to provide a truly dynamic experience at the speed of static, with framework-defined infrastructure that automatically takes advantage of the best infrastructure primitives.

Malte Ubl` discusses the concept of `framework-defined infrastructure`, an evolution of `infrastructure as code (IaC)` that abstracts over cloud primitives to provide portability, eliminate manual configuration, and increase productivity. This approach uses well-established patterns in frameworks to automatically map framework concepts onto appropriate infrastructure without explicit declaration or configuration. The author highlights the benefits of this concept, including more predictable, lower-cost, and lower-risk DevOps through truly serverless—and, dare we say, infrastructureless—architecture. The text also provides examples using Next.js, a popular open-source framework, to demonstrate how framework-defined infrastructure improves development experiences in modern views of infrastructure definition and automation.

Turborepo is a high-performance build system for JavaScript and TypeScript codebases, reimagining build systems to make them accessible for everyone. It aims to accomplish this through incremental builds, parallel execution, and Remote Caching. Turborepo's caching makes the longest builds near-instant, enabling faster development and iteration. The team has decided to start an incremental migration from Go to Rust in the 1.7 version due to Rust's prioritization of correctness over API abstraction, which aligns with their needs for process management, filesystems, shipping software, and file permissions. Rust's strong ecosystem also benefits Turborepo, allowing for safe interfacing with native C libraries and a great internal developer experience. The migration is part of an incremental process, with the team already using Rust in some parts of the codebase, enabling them to choose between Go and Rust for different implementations.

Framework-defined infrastructure (FdI) is an evolution of Infrastructure as Code (IaC), where the deployment environment automatically provisions infrastructure derived from the framework and the applications written in it. FdI abstracts over cloud primitives, making them mere implementation details of the framework's concepts, providing portability between different target infrastructure providers, eliminating manual configuration, increasing time spent writing product code, allowing unchanged use of native local development tools, and standardizing on pre-reviewed secure services. FdI takes advantage of inversion of control and predictable structure of framework-based applications to automatically map framework concepts onto the appropriate infrastructure without explicit declaration or configuration of the infrastructure.

Vercel has announced the general availability of its Monitoring tool for Pro and Enterprise teams, and made Logs available to all users. The new tools provide real-time insights into web traffic and performance data, enabling teams to quickly identify and resolve issues before they become major problems. With Monitoring, teams can access aggregated views of their application's performance, track and analyze bottlenecks, and make data-driven decisions to optimize their web applications. Additionally, the new Logs feature allows users to drill-down into errors and issues, understand past logs, and create custom queries for personalized insights. These tools aim to provide detailed insights into application performance, enabling teams to minimize downtime and improve overall performance.