はてなブックマーク

Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends. Vercel's main website, once a single large Next.js application, serves both our website visitors and logged-in dashboard. But, as Vercel grew, this setup revealed opportunities for improvement. Build times grew, dependency management became more intricate, and workflows

React 19 is near. The React Core Team announced a React 19 release candidate (RC) this past April. This major version brings several updates and new patterns, aimed at improving performance, ease of use, and developer experience. Many of these features were introduced as experimental in React 18, but they will be marked as stable in React 19. Here’s a high-level look at what you need to know to be

MERJ and Vercel's research to demystify Google's rendering through empirical evidence. Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript. We’ve noticed that a number of o

Web rendering has evolved from simple server-rendered HTML pages to highly interactive and dynamic applications, and there are more ways than ever to present your app to users. Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and experimental Partial Prerendering (PPR) have all been developed to optimize performance, SEO

Vercel Functions run code on demand without the need to manage your own infrastructure, provision servers, or upgrade hardware—and are now powered by Rust under the hood. We're gradually rolling out these improvements to new deployments, with all customers on our new Rust-powered functions in the coming weeks. No action is required. We've already served billions of invocations on our new system, w

A frontend take on Jeff Dean's "Latency Numbers Every Programmer Should Know". Web page load times and responsiveness to user action in web apps is a primary driver of user satisfaction–and both are often dominated by network latency. Latency itself is a function of the user's connection to the internet (Wifi, LTE, 5G), how far away the server is that the user is connecting to, and the quality of

Hobby remains free, Pro has reduced prices on bandwidth and functions, and more granular usage metrics for all plans. Based on your feedback, we're updating how we measure and charge for usage of our infrastructure products. We're reducing pricing on Vercel fundamentals like bandwidth and functions For the majority of customers, monthly bills will remain the same or decrease We're introducing new

Design Engineer is a new role that is gaining popularity—a role that is both confusing and exciting. Expectations for what good software looks and feels like have never been higher. Design Engineers are a core part in exceeding that expectation. This post will go behind the scenes for Design Engineering at Vercel, our work, skills, and how we contribute to shipping with a high degree of polish and

Configuring your Remix application with the Vercel Vite preset. We've collaborated with the Remix team to add Server Bundles to Remix. Vercel will now detect Remix projects using Vite and optimize them using our new Vite preset (@vercel/remix/vite). This preset enables adding additional features for Remix on Vercel such as: Streaming SSR: Dynamically stream content with both Node.js and Edge runti

Stream React Components from LLMs to deliver richer user experiences Last October, we launched v0.dev, a generative UI design tool that converts text and image prompts to React UIs and streamlines the design engineering process. Today, we are open sourcing v0's Generative UI technology with the release of the Vercel AI SDK 3.0. Developers can now move beyond plaintext and markdown chatbots to give

We’ve been building a new foundation for compute, built on top of Vercel’s Managed Infrastructure, for the past year. Today, we’d like to share our first major iteration of Vercel Functions: Increased Concurrency: Now up to 100,000 concurrent invocations Web Standard APIs: New Function signature using Web Request and Response Zero-Config Streaming: Stream responses with the full power of Node.js L

Unlocking the future of your build system with Rust-based Turbo. We've finished porting Turborepo, the high performance JavaScript and TypeScript build system, from Go to Rust. This lays the groundwork for better performance, improved stability, and powerful new features. Here’s how we finished this port and shipped the first all-Rust version of turbo. Since last timeAt the end of our previous art

Understanding your application's Google page experience ranking and Lighthouse scores. Core Web Vitals influence how your application's pages rank on Google. Here, we'll dive into what they are, how they’re measured, and how your users and search ranking are impacted by them. Malte Ubl is the CTO of Vercel and former Director of Google Search responsible for shipping the “Page Experience” ranking

After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router. This post will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model. Using Route Handlers with Server ComponentsConsider the following code for a Server Component:

Tinloof Co-founder Seif Ghezala gives insights into how his team measures website speed with best practices to make faster websites. Tinloof is an agency obsessed with delivering fast websites such as jewelry brand Jennifer Fisher, which went from a Shopify theme to a modern Next.js website that instantly loads with 80% less JavaScript. When evaluating the speed of a website, they look at key metr

Recommendations for building and scaling large software projects. Scaling a codebase is an integral, and inevitable, part of growing a software company. You may have heard many terms thrown around as answers — monoliths, monorepos, micro frontends, module federation, and more. At Vercel, we’ve helped thousands of large organizations evolve their codebases, and we have an opinion on the optimal way

With PPR enabled, this page generates a static shell based on your <Suspense /> boundaries. The fallback provided to React Suspense is prerendered. Suspense fallbacks in the shell are then replaced with dynamic components, like reading cookies to determine the cart, or showing a banner based on the user. Under the hood of PPRWhen you build your application, Next.js will prerender a static shell fo

At Vercel, we've developed Geist, a typeface specifically designed for developers and designers. We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities. Geist embodies our design principles of simplicity, minimalism

A few weeks ago, we introduced v0: a product that makes website creation as simple as describing your ideas. We call it Generative UI—combining the best practices of frontend development with the potential of generative AI. The interest in v0 has been incredible, with 100,000 people registering for the waitlist in just three weeks. Today, we’re transitioning v0 from Alpha to Beta, rolling out acce

In the latest version of Next.js, we've made improvements to optimize package imports, improving both local dev performance and production cold starts, when using large icon or component libraries or other dependencies that re-export hundreds or thousands of modules. This post explains why this change was needed, how we've iterated towards our current solution, and what performance improvements we

Projects using Bun as a package manager can now be deployed to Vercel with zero configuration. Like yarn, npm, and pnpm, Bun acts as a package manager focused on saving disk space and boosting installation speed. Starting today, Projects that contain a bun.lockb file will automatically run bun install as the default Install Command using bun@1. This change impacts the build phase but not runtime.

Using Zig in our incremental Turborepo migration from Go to Rust We’ve been porting Turborepo, the high-performance build system for JavaScript and TypeScript, from Go to Rust. We talked about how we started the porting process, so now let’s talk about how we began porting our two main commands: run and prune. Since last timeWhen we last left off, we had begun our port by implementing global turbo

Large migrations are inevitable, but they don't have to be painful or risky. Learn why incrementally migrating is the solution. In 2023, there are few software projects that are true greenfield endeavors. Instead, migrations of existing systems are the new normal. Migrations done wrong can introduce substantial business and timeline risks into any software project. An incremental migration strateg

Today, we’re excited to introduce Next.js Commerce 2.0. App Router Ready: Using React Server Components, Server Actions, built-in layouts, metadata, and all the new patterns from the recently released App Router. Dynamic Storefront: A dynamic storefront at the speed of static. Customize content without sacrificing performance. Simplified Architecture: Next.js Commerce is now a single provider per

Understanding React Server ComponentsLearn the fundamentals of React Server Components, to better understand why (and when) to adopt. React Server Components (RSCs) augment the fundamentals of React beyond being a pure rendering library into incorporating data-fetching and remote client-server communication within the framework. Below, we’ll walk you through why RSCs needed to be created, what the

Embed tweets into your React application without sacrificing performance. Introducing react-tweet – embed tweets into any React application with a single line of code, without sacrificing performance.