January 2024 Summaries

Streaming is a key technique for building fast web applications, allowing for progressive delivery of UI components to improve performance and user experience. By utilizing streaming with the Next.js App Router and React Suspense, developers can take advantage of out-of-order streaming, which enhances user experience by rendering parts of a UI while continuing to load other elements. Streaming also enables colocating compute next to data origin, reducing network traffic and improving performance, particularly for large sites like Amazon and Google. Additionally, streaming is being used in AI applications with Large Language Models (LLMs) to mitigate slow response times and improve user experience.

Google's page experience ranking system evaluates the performance of websites based on their Core Web Vitals metrics, which measure how real users interact with a site. These metrics include Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Unlike Lighthouse scores, which are lab-based tests, Core Web Vitals field data is collected from real users browsing the site, providing more accurate insights into user experience. Improving Core Web Vitals can improve user experience, conversion rates, and search ranking, but it's essential to note that internet connectivity and device performance vary globally, and slower regions may impact rankings. Google collects this data on a 28-day sliding window, making it challenging to see the full impact of improvements or regressions immediately. To maximize iteration velocity, tools like Vercel Speed Insights provide real-time, easily filterable access to Core Web Vitals, allowing developers to quickly identify and fix issues as they appear.

Google's page experience ranking system evaluates the performance of websites based on Core Web Vitals metrics. These metrics measure how users interact with a website and provide insights into user experience, conversion rates, and search engine rankings. Adopting Next.js or Vercel's managed infrastructure can improve Core Web Vitals scores. Google collects field data by observing real users interacting with the site, which is distinct from lab data provided by Lighthouse tests. The 28-day sliding window used in field data means that changes may not be immediately reflected in search rankings. To maximize iteration velocity, Vercel's Speed Insights offers real-time, easily filterable access to Core Web Vitals data, allowing developers to quickly identify and fix issues affecting site performance and user experience.

Stripe, a leading fintech company, leveraged Vercel to build and optimize a live look at their reliability during Black Friday and Cyber Monday. By harnessing Vercel's framework-defined infrastructure, Stripe was able to focus on design, performance, and reliability rather than architecting a dynamic cache system from scratch in 19 days. The team utilized Next.js, SWR, and ISR to create a flawlessly performing microsite that showcased real-time transaction data. To optimize for the unique challenges of a viral real-time microsite, Stripe implemented a solution that included getStaticProps, Stale-While-Revalidate, and Incremental Static Regeneration. This approach effectively decreased backend load by redirecting traffic to Vercel's cache network and utilizing ISR for background data generation. The project ensured reliability and uncompromising safety, with Stripe handling a peak volume of 93,304 transactions per minute while maintaining API uptime greater than 99.999%.

The Next.js App Router has several common mistakes that developers make when building with it, including using Route Handlers with Server Components unnecessarily, not providing absolute URLs for fetch requests, and not revalidating data after mutations. Additionally, there are issues with using Context providers with App Router, adding "use client" directives unnecessarily, and handling redirects in try/catch blocks. The App Router offers new features like Static Exports, Partial Prerendering, and Server Actions, which require a better understanding of the model to take full advantage of them. To avoid common mistakes, developers should learn about these concepts and how to apply them correctly in their Next.js applications.

Vercel's Frontend Cloud has been found to deliver a 264% ROI over three years, resulting in $9.53M in quantifiable benefits for businesses that migrated to the platform. This was achieved through improved developer experience, including reduced time spent on managing frontend infrastructure and building/deploying code, as well as increased major website enhancements. Additionally, Vercel's Frontend Cloud has been shown to improve user experience, leading to higher customer conversion rates and website traffic, generating $2.6M and $7.7M in incremental profits respectively. The benefits of using Vercel's platform were found to be significant enough to alleviate common challenges such as inefficient developer workflows, poor user experience, and sluggish site performance, resulting in a positive impact on the bottom line.

Vercel's Frontend Cloud has been shown to significantly boost developer velocity and improve user experience, resulting in a 264% ROI over three years and $9.53 million in quantifiable benefits according to a Forrester Consulting study. The study, which involved interviews with Vercel customers, highlights that developers experience a 90% reduction in time spent managing frontend infrastructure and an 80% decrease in time spent building and deploying code, allowing them to release four times more major website enhancements. These improvements lead to better website performance and higher user engagement, with increased customer conversion rates generating $2.6 million and elevated website traffic contributing $7.7 million in incremental profits. The findings suggest that Vercel allows businesses to focus more on differentiating their applications in terms of user experience, encouraging organizations to build, scale, and secure a faster, more personalized web presence in 2024 and beyond.