Vercel and Next.js: The Business Logic Behind the Open Source All-Star Team

The video version is recommended for simultaneous viewing. If you like it, please click three times in a row~

https://www.bilibili.com/video/BV1gR4y1u76v/?aid=338379683&cid=492767270&page=1

Introduction

Vercel is a cloud service company founded by Guillermo Rauch. It is known to the public for having several well-known open source projects. With its high-profile debut in financing, recruitment, and products in 2021, Vercel's business logic has become clearer.

Backstory: The Age of Backend Rendering

React, one of the representatives of modern front-end frameworks, was open sourced in 2013, and together with other front-end frameworks in the same period, it has promoted the development model of front-end and back-end separation until now.

Before modern front-end frameworks were widely adopted, most websites used back-end rendering to output front-end pages.

Taking a typical news website as an example, when a news editor submits an article in the background (such as a CMS), the content corresponding to the article will first be saved in the database. When readers access the URL of this article, the back-end program will read the content in the database, pass it into the front-end template, render the final HTML result and return it to the browser.

However, this method is wasteful in terms of performance, because the content of the article rarely needs to be modified after it is published, but every time tens of thousands of readers open the article page, there will be repeated overhead of database query and back-end rendering. A very natural solution is to cache the HTML rendered in the backend, and this cache is easier to push to the CDN as static content to achieve national or even global acceleration. Even if the content of the article needs to be modified, this solution can be easily dealt with by regenerating and then updating the CDN.

Due to its simple implementation and outstanding effect, such an architecture is widely used in various websites with relatively static content.

Backstory: Guillermo Rauch

Vercel's open source project Next.js is not Guillermo's first open source project. Guillermo's other two widely used early open source projects are Node.js' websocket framework socket.io and MongoDB client mongoose. Before the founding of Vercel, he already had considerable Node.js back-end development skills.

He is also one of the developers of the legendary open source project Mootools. Mootools' code isn't much of a surprise from today's perspective, and it didn't beat jQuery in its contemporaneous competition. But in the developer list of this project, there are a lot of well-known developers, many of whom later joined Facebook to participate in the development of front-end projects such as React, including Sebastian Markbåge, the soul of the React team, and Christoph, the creator of the testing tool jest Nakazawa et al. It is not difficult to see that Guillermo also had in-depth research on front-end frameworks at that time, and there were a group of core players in the future React community.

Zeit now: A minimalist deployment experience

Guillermo founded a company called Zeit in 2015, and in 2020 it changed its name to what is now better known as Vercel. In 2016, Zeit launched the core product now, which helps developers easily deploy applications to the cloud, and kicked off the commercialization of Vercel.

Compared to the backend rendering architecture we mentioned in the backstory, Guillermo found two obvious pain points at the time:

1. Although the design of this architecture is not complicated, it is difficult to implement in practice. It often requires the deployment of experienced devops on the cloud to help the implementation. This is also considered to be the patent of medium and large companies, and there is a lack of correspondence between small companies and individual developers. manpower.
2. There are many public cloud services and complex logic. Ordinary developers want to learn and achieve best practices, and it takes even more time than developing the application itself.

With this as a starting point, now was born. Now itself does not develop complex cloud infrastructure, but helps users deploy applications to public clouds such as AWS. Combining Guillermo's rich experience in web application development in the past, he encapsulated a series of tasks such as domain name configuration, DNS resolution, SSL certificate, CDN caching, etc. into the product, allowing users to truly deploy applications with one click and enjoy the best practices. performance advantage.

The pursuit of minimalism runs through Zeit's product definition and visual design, and the elegant black and white interface has become their earliest business card.

At this stage, Zeit's now-based business logic has been clear: saving user manpower by simplifying public cloud deployment, and improving application performance through production environment best practices. The former is not difficult to understand, the labor cost saved by users can be converted into the willingness to pay, and the latter is Zeit/Vercel's continuing thinking: users are most willing to pay for the production environment to improve stability and performance.

The difficulty of this model is how to create stickiness for users instead of switching to lower-cost public clouds or other deployment platforms with the same positioning. Guillermo's answer is to start from the Node.js and front-end technology he is proficient in, and cut into the market in an open source way.

Next.js: The product after the front and back ends are separated

With the popularity of modern front-end frameworks, more and more web development is shifting from back-end rendering to a development model where front-end and back-end are separated. The back-end service is no longer responsible for rendering views, but provides data in the form of API for use by clients in different forms, and the original work of rendering views is transferred to the front-end.

This approach reduces the coupling between the front-end and the back-end, shifts the rendering load to the client, it is easier to support both desktop and mobile websites, and the front-end can develop more complex client-side interactions, so it quickly became popular.

But the architectural change also brought new problems. After separation, the HTML returned by the backend is likely to contain only a few views, while most of the views are dynamically rendered by the framework on the frontend, and the data is also loaded asynchronously through the API. The most typical problem brought about by this change is the failure of SEO. Most search engines index the HTML content returned by the backend. However, after the front-end and back-end are separated, the information read by the search engine is very limited, which affects the SEO performance of the website.

This problem has made it impossible for a large number of SEO-dependent websites to use modern front-end frameworks, and framework developers have also started to solve this problem as a top priority. However, the back-end rendering scheme of the framework represented by SSR usually has the problems of being difficult to use and poor performance in the early stage of design, and a standardized scheme has not been formed until now.

In 2016, Guillermo saw the opportunity behind this problem and created Next.js, an open source React upper-level framework. In the next few years, Next.js continued to focus on SSR, SSG, JAM stack and other directions, but it remained the same, solving the problem of how modern front-end frameworks render back-end. At the same time, with the deep understanding and continuous operation of the open source community, Next.js has also become a very popular project in the fields of React and Node.js.

The achievements of Next.js in the open source community have brought new business opportunities to Zeit. A large number of developers have become sticky with Next.js and Zeit, and the deployment of Next.JS will be more complicated than ordinary static pages. For this reason, Zeit now deeply integrates Next.js in a timely manner, so that developers who use Next.js Become a first class citizen in the Zeit now platform with the project.

Similarly, the minimal deployment experience and production-level guarantees that can be obtained by relying on Zeit now also give Next.js unique advantages compared with similar open source products, and further strengthen Next.js.

Vercel: A product matrix on top of an open source all-star team

As Next.js and Zeit now complement each other, Zeit changed its name to Vercel and completed a $21 million Series A financing in April 2020, officially setting sail.

Since then, Vercel has successively completed Series B, C, and D rounds of financing, with a total financing amount of US$313 million. What attracts attention as well as the continuous financing is Vercel's recruitment results.

Tim Neutkens, the current Next.js lead developer, came to Vercel from the community. Initially, Tim participated in Next.js in an open source manner, and developed mdx, an important project in the Next.js ecosystem. In 2017, he officially joined Vercel as the first full-time Next.js developer.

Tim isn't the only open source star that has grown inside Vercel. Chinese engineer Shu Ding works in both R&D and design at Vercel. At the same time, he also leads the development of SWR, a popular open source data request tool in the React community. Functionally, SWR further enhances the development experience in Next.js.

From the two of them, we can see the depth of the engineers and open source culture inside Vercel, as well as the strong operation and promotion ability.

In addition to internal training, what Vercel makes people talk about is their ability to tap talents from well-known open source projects.

In 2019, Vercel hired core maintainer Joe Haddad from React's official scaffolding project create-react-app, and the ease of use of Next.js scaffolding has improved significantly in the years since. In this signing, Vercel's recruitment strategy is very clear. As a commercial company that provides services to developers, mining talents from open source projects that developers rely heavily on can effectively improve product competitiveness and increase its own presence in the open source community. The right to speak.

This is especially true for a series of recruitment moves from 2021.

In order to achieve back-end rendering, Next.js heavily uses webpack, a packaging and construction tool in the JS ecosystem. In order to enhance the understanding and voice of webpack, Vercel recruited webpack creator Tobias Koppers.

Since JS needs to deal with complex browser compatibility issues, most projects use babel as a compilation tool to solve this problem. Instead of recruiting from the babel community, Vercel threw the olive branch to Donny, the author of SWC. SWC is an alternative to babel developed in rust and has dozens of times the performance advantage. The latest version of Next.js also fully uses SWC instead of babel.

After that, Vercel directly acquired the monorepo construction tool Turborepo and made it open source. The project founder Jared Palmer was also recruited. Jared is also the author of the well-known open source projects Formik and TSDX. With countless builds and compilations happening on the Vercel platform every day, high-performance tools like SWC and Turborepo, if widely used, will save Vercel itself a lot of public cloud spending.

It wasn't enough to lure developers to the Vercel platform with Next.js, Vercel turned to other front-end frameworks. After supporting the construction and deployment of most frameworks on the market, Vercel announced the recruitment of Rich Harris, the author of the Svelte framework. Presumably, Svelte will also get the most refined integration experience on the Vercel platform like Next.js.

At the end of 2021, they announced the last big news of the year when everyone was attracted by Vercel's continuous heavy recruitment. Sebastian Markbåge, the soul of the React core team, will also join Vercel. As a framework built on top of React, the future of Next.js is tied to the evolution of React. Especially after the React team proposed the concept of server component, whether the backend rendering of Next.js can be combined with the official solution is inseparable from Sebastian's technical vision and the right to speak in the React project.

With the completion of the open source all-star team, Vercel's product matrix from build tools, compilers, and development frameworks is also more complete. Different from the common perception that open source brings business risks, Vercel recruits core members and gains the right to speak in a number of core open source projects, but instead has become an open source dependency that developers cannot avoid. The stickiness helped Vercel further build a commercial moat.

Prediction: Vercel's Future and Challenges

After sorting out Vercel's team formation and product evolution ideas, we may boldly predict its future actions and challenges it needs to face.

First, continue the way of recruiting Svelte authors. Each time we establish in-depth cooperation with a front-end framework, we can acquire a batch of new potential users. In the future, Vercel is very likely to recruit from the VueJS core team, it is also possible to start with Nuxt, the Next.js alternative in the Vue.js ecosystem, or even acquire the Nuxt team as a whole.

Secondly, whether deep integration of webpack is the right choice is also a problem that Next.js needs to face. When switching to swc to improve performance, the Vercel team said that they would continue to use webpack, regardless of new build solutions such as vite. But from the community Q&A, we still saw a lot of webpack-related issues, and some developers complained that the complex configuration of webpack made the experience of Next.js less than expected.

The last is the competition with other manufacturers. Needless to say, similar manufacturers such as Netlify will continue to put pressure on Vercel in terms of products and technologies, and the giants such as AWS and Cloudflare used behind Vercel will also bring huge challenges. AWS has a powerful Amplify, Cloudflare's Pages and Workers services are gaining more customers, and their price and integration advantages may be an insurmountable barrier for Vercel.

But in any case, Guillermo and Vercel are amazing enough, and they have also brought new ideas to the combination of open source and commercialization.