June 2023 Summaries

Vercel is integrating its Edge Config service with LaunchDarkly, a feature flags and experimentation platform, to provide low-latency global feature flags for frontend developers. The integration allows users to export flag configurations from LaunchDarkly to Vercel Edge Config, instantly making them available for use in their applications. This combination enables fast and safe experimentation, A/B testing, and configuration updates without redeploying code, reducing latency and improving user experiences. With the launch of this integration, developers can now update their UI and behavior in real-time with minimal latency, creating a better experience for their users.

reMarkable, a pioneer in the next-generation paper tablet industry, adopted a composable stack consisting of Sanity, Next.js, and Vercel to improve their developer experience while delivering great UX. The team migrated from Gatsby and saw improvements in build times, streamlined review cycles, empowered their editorial team, and reduced development build times. They achieved this through an incremental migration strategy, allowing them to transition smoothly and minimize disruption to their workflow. With their new composable stack, reMarkable is now poised for future success with a self-sufficient editorial team and faster builds, enabling them to ship more efficiently and deliver great digital experiences.

Web streams provide a standardized way to continuously send or receive data asynchronously across network connections, enabling developers to handle large data sets through "chunks", deal with congestion control (backpressure), and create highly efficient and responsive applications. Leveraging web streams can enhance the performance and responsiveness of UIs, providing real-time updates and interactions, quicker load times, more up-to-date information, and a smoother interface. Web streams have become a cornerstone of many major web platforms and offer several key advantages, including instant data processing, fine-grained control, and the ability to handle backpressure, which can be challenging but is handled automatically through flow control. Server-Sent Events (SSE) are also supported by web streams, enabling real-time updates from servers to clients. The Web Streams API has become a crucial tool for developers building efficient and responsive web applications, especially those dealing with heavy data loads or slow network connections.

Draft Mode is a new feature on Vercel that allows users to see their latest content changes before they're published, making it easier to review and edit in real-time. This feature is integrated with Visual Editing, which enables real-time content editing for headless Content Management Systems (CMSes). With Draft Mode, users can easily server-render previews of static pages, protect unpublished content from being viewed publicly, and integrate with any headless provider of their choice. Additionally, the feature allows for unpublished draft posts that bypass Incremental Static Regeneration (ISR) and are not cached, making it easier to collaborate on website content without involving developers. The Visual Editing feature is now in public beta for Pro and Enterprise teams, and more CMSes have adopted the content source-mapping technology to enable this functionality.

Neo Financial, a Canadian financial services company, leverages Vercel's frontend cloud to enhance their web development process, boost performance, and meet industry security standards, resulting in a 50% reduction of infrastructure administrative effort. The company achieves improved rendering and performance through seamless integration with Next.js, delivering fast-loading pages and an average page load speed improvement of 77%. Vercel's platform empowers Neo Financial's engineers to work collaboratively, deploy updates easily, and reduce release cycle time, enabling them to iterate quickly and respond to market demands. With industry-standard security certifications and scalable infrastructure, Neo Financial can host their banking portal securely and consistently deliver experiences to customers across regions, ultimately saving resources for investing in engineering features.

Vercel is introducing Skew Protection, a novel mechanism to eliminate version skew between web clients and servers. Version skew occurs when two components of a software system communicate with different versions, leading to potential problems. With Skew Protection, applications are bound to the original version that generated them, ensuring that clients loaded with an old field name talk to servers with the same version that knows how to handle it. This feature is available as an experimental feature in Next.js and will reduce errors users observe during new deployments, increasing developer productivity. However, Skew Protection does not eliminate version skew per-se and requires services behind the frontend server to be robust to being called from older clients. The mechanism introduces a trade-off between client convenience and backend-service backward compatibility requirements, but mitigates risks with same-origin request limitations and planned features to support blocking deployments after security fixes or important changes.

SvelteKit 1.0 has been released, allowing developers to leverage the power of full-stack Svelte without worrying about breaking changes. The framework-defined infrastructure (FDI) brought by Vercel enables features previously only available in Next.js, such as per-route configuration for Serverless and Edge Functions, Incremental Static Regeneration (ISR), and easier compatibility with various deployment environments. SvelteKit's adapter system allows flexibility from one codebase to deploy to any number of platforms, with adapters built-in for Vercel, Netlify, Cloudflare, Node, and more. Per-route data fetching and rendering enable benefits such as avoiding layout shift and other issues that come from loading data after page render. Serverless vs. Edge Functions have distinct advantages, and configuring individual routes allows choosing between the two. Incremental Static Regeneration (ISR) combines the benefits of SSG and SSR, offering fast load times for end-users and reduced load on servers. Other Vercel gains include data at the edge, preview deployments with live editing and commenting, and analytics to monitor application performance.

The Vercel AI SDK is an open-source library designed to help developers build conversational, streaming, and chat user interfaces in JavaScript and TypeScript. The SDK supports React/Next.js, Svelte/SvelteKit, with support for Nuxt/Vue coming soon. It includes first-class support for OpenAI, LangChain, and Hugging Face Inference, enabling interoperability across different AI model providers. The SDK provides built-in LLM adapters, streaming first UI helpers, stream helpers and callbacks, and is edge-serverless ready. A new Chat & Prompt Playground has also been launched, allowing developers to compare various language models in real-time, tweak parameters, and quickly generate code. The Vercel AI SDK aims to accelerate product development by enabling developers to focus on creating value with their AI applications rather than spending time building and maintaining infrastructure.

Potion, a Notion-to-website builder, was acquired by an unknown party for $300,000 after achieving significant growth milestones including 4,000 custom domains and 100,000 pageviews per month. The company leveraged Vercel's Frontend Cloud toolkit to achieve this success, utilizing features such as Server-Side Rendering, Incremental Static Regeneration, and the Platforms Starter Kit to deliver a scalable and user-friendly platform. With Vercel, Potion was able to quickly set up wildcard subdomains for users, upsell them with custom domains, and support thousands of hosted websites with lightning-fast load times and optimal SEO performance. The acquisition is a testament to the power of Vercel's technology in enabling businesses to succeed at scale.

Vercel's AI Accelerator is a 6-week program designed for top AI builders and early-stage startups to create and develop next-generation AI apps, offering over $850k in credits from top AI platforms, access to a private community, coaching, awareness, and demo day opportunities.

TinaCMS is a headless CMS that allows content to be stored in files such as Markdown, MDX, JSON, and more, while staying in-sync with the user's Git repository. The platform aims to provide a seamless experience for both developers and marketers by integrating Visual Editing capabilities, making it easier for users to work on branches and collaborate. With Vercel Preview Deployments, TinaCMS allows users to click-to-edit content without leaving the page, providing a more efficient workflow that balances developer productivity with marketer's needs. The integration also enables incremental static regeneration, server-side rendering, and version control for content, making it an attractive option for large documentation and marketing sites.

We designed the Vercel virtual product tour to address several challenges in our marketing funnel. The interactive experience aims to excite users about Vercel's offerings and familiarize them with the platform, while providing insight into behind-the-scenes product magic and highlighting paid features. The design unfolds as an interactive slideshow that allows users to take their time on each slide while maintaining a sense of progress. A dynamic tooltip focuses the user on the most relevant information in each slide, offering more interaction than a static button. The mobile experience is emulated as cards that users can easily tap through, and accessibility was considered from the outset, with features such as keyboard navigation and a "Get Started" button to ensure usability for all users. The tour is built using Next.js and Vercel deployments, which enable the transformation of everyday digital interfaces into impactful experiences.