The video version is recommended to watch at the same time, please click three links ~

# Vercel & Next. Js: The business logic behind Open Source all-star teams

primers

Vercel, the cloud services company founded by Guillermo Rauch, is known for several well-known open source projects, and with a high-profile 2021 announcement in terms of funding, hiring, and products, the business logic for Vercel is becoming clearer.

Backstory: The age of back-end rendering

React, one of the best examples of modern front-end frameworks, was opened in 2013 and, along with other front-end frameworks at the same time, promoted the development model of front – and back-end separation until now.

Before the modern front-end framework was widely adopted, most websites used the way of back-end rendering to output front-end pages.

Take a typical news website as an example. When a news editor submits an article in the background (such as a CMS), the corresponding content of the article is first saved in the database. When the reader accesses the URL of this article, the back-end program reads the contents of the database and passes it into the front-end template, rendering the final HTML result and returning it to the browser.

This approach is wasteful in terms of performance, since the content rarely needs to be modified after publication, but tens of thousands of readers have repeated overhead of database queries and back-end rendering every time they open an article page. A natural solution is to cache the back-end rendered HTML, which as static content is also easier to push to the CDN for national and even global acceleration. Even if the content of the article needs to be modified, this scheme can be easily handled by regenerating and updating the CDN.

This architecture is widely used in sites with relatively static content due to its simplicity and high performance.

Back story: Guillermo Rauch

Vercel’s flagship open source project, next.js, is not Guillermo’s first open source project, Two of Guillermo’s other early open source projects that were widely used were The Node.js websocket framework socket. IO and the MongoDB client Mongoose, This shows that he had considerable node.js backend development expertise before he founded Vercel.

He is also one of the developers behind the legendary open source project Mootools. Mootools’s code is not too surprising from today’s point of view, and it failed to beat jQuery in its competition. But the list of developers for the project was full of well-known developers, many of whom later joined Facebook to work on front-end projects like React, Sebastian Markbage, the soul of the React team, and Christoph Nakazawa, creator of the testing tool Jest. It’s easy to see that Guillermo had a deep understanding of the front-end framework at the time, and was surrounded by a core group of future React community players.

Zeit Now: A minimalist deployment experience

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

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

  1. The architecture is not complex in design, but it is difficult to implement in practice, often requiring devOps experienced in cloud deployment, which is considered to be the preserve of large and medium-sized companies, and small companies and individual developers lack the manpower to do so.

  2. Public cloud services are so numerous and logically complex that it takes the average developer more time to learn and implement best practices than it does to develop the application itself.

From that point of view, now was born. Instead of developing complex on-cloud infrastructure, NOW helps users deploy their applications to public clouds such as AWS. Combining Guillermo’s extensive experience in Web application development, he packaged domain name configuration, DNS resolution, SSL certificates, CDN caching and other work into the product, allowing users to truly deploy applications with one click and enjoy the performance benefits of best practices.

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

At this stage, Zeit’s now-based business logic is clear: save user manpower by simplifying public cloud deployments and improve application performance through production environment best practices. The former is easy to understand, and users’ labor cost savings can be translated into willingness to pay, while the latter is Zeit/Vercel’s philosophy that continues today: users are most willing to pay for stability and performance in a production environment.

The difficulty with this model is how users can engage rather than move to the lower cost public cloud or other deployment platforms with the same positioning. Guillermo’s answer was to take his expertise in Node.js and front-end technology and open source to market.

Next.js: the product of the separation of the front and back ends

With the popularity of modern front-end frameworks, more and more Web development is moving away from back-end rendering to a development model that separates the front and back ends. The back-end services are no longer responsible for rendering the view, but instead provide the data in the form of aN API for use by different types of clients, while rendering the view is moved to the front end.

This approach quickly gained popularity by reducing the coupling between the front and back ends, shifting the rendering load to the client, making it easier to support both desktop and mobile sites, and enabling the front end to develop more complex client-side interactions.

But the change in architecture has brought new problems. After separation, the HTML returned by the back end is likely to contain very few views, while most of the views are rendered dynamically in the front end by the framework and the data is loaded asynchronously through the API. The most typical problem caused by this change is SEO failure. Most search engines index the HTML content returned by the back end, but the information read by the search engine is very limited after the separation of the front and back end, which affects the SEO effect of the website.

This problem has prevented many seO-dependent sites from using modern front-end frameworks, and framework developers have made it a priority to address it. However, the framework back-end rendering scheme represented by SSR usually has problems of difficulty in getting started and poor performance at the initial stage of design, and it has not been able to form a standardized scheme up to now.

In 2016, Guillermo saw an opportunity behind this problem and created next.js, an open source React superframework. In the years that followed, Next. Js continued to focus on SSR, SSG, JAM Stack, etc., but the same changes were made to solve the back-end rendering problem of modern front-end frameworks. With its deep understanding of the open source community and ongoing operations, next.js has become a popular project in the React and Node.js space.

The work of Next. Js in the open source community opens up new business opportunities for Zeit. A lot of developers are starting to get stuck with Next. Js because deployment with Next. Js is more complex than normal static pages, Zeit Now has a deep integration with Next. Make developers and projects using next.js first-class citizens of the Zeit Now platform.

Similarly, the minimal deployment experience and production-level assurance that can be achieved with Zeit Now gives Next. Js a unique advantage over other open source products, further strengthening Next.

Vercel: Product matrix on top of open source all-star teams

As Next. Js and Zeit Now went hand in hand, Zeit changed its name to Vercel and launched in April 2020 with A $21 million Series A funding round.

Since then, Vercel has raised series B, C and D funding for a total of $313 million, and just as notable is its hiring success.

Currently Tim Neutkens, lead Developer at next.js, came to Vercel from the community. Tim was initially involved in Next. Js as an open source and developed MDX, a key project in the Next. In 2017, he joined Vercel as the first full-time developer of next.js.

Tim is not the only open source star that Vercel has nurtured internally. Shu Ding, a Chinese engineer who works in r&d and design at Vercel, also led the development of SWR, a popular open source data request tool in the React community, which further enhances the development experience in next.js.

Both of them demonstrate the depth of the engineering and open source culture within Vercel, as well as its ability to operate and promote.

In addition to in-house training, Vercel is known for its ability to tap talent from well-known open source projects.

In 2019, Vercel hired Core maintenance Joe Haddad from creation-React-app, the official React scaffolding project, and in the years since, the ease of scaffolding for Next. Js has improved dramatically. Vercel’s recruitment strategy is clear. As a commercial company that provides services to developers, sourcing talent from open source projects that developers rely heavily on can improve its product competitiveness and increase its voice in the open source community.

This is especially true with a series of hiring moves starting in 2021.

Next. Js makes heavy use of webpack, a packing-build tool in the JS ecosystem, for back-end rendering. Vercel recruited Webpack creator Tobias Koppers to help it understand and speak about webpack.

Since JS has to deal with complex browser compatibility issues, most projects use Babel as a compilation tool to solve this problem. Rather than recruit from the Babel community, Vercel turned to SWC author Donny. SWC is an alternative to Babel developed using RUST and has a performance advantage up to a factor of ten. The latest version of next.js also uses SWC in place of Babel.

Vercel has since acquired Turborepo, a monorepo build tool, and made it open source, bringing in Jared Palmer, who is also the author of Formik and TSDX. Countless builds and compilings take place on the Vercel platform every day, and high-performance tools like SWC and Turborepo can save Vercel itself significant public cloud costs if they become widely available.

It wasn’t enough just to use next.js to entice developers to use the Vercel platform; Vercel turned its attention to other front-end frameworks. After supporting the construction and deployment of most frameworks on the market, Vercel has announced the hiring of Rich Harris, author of the Svelte framework, and Svelte is expected to enjoy the most refined integration experience on the Vercel platform, just like Next.

While everyone was captivated by Vercel’s relentless hiring spree, in late 2021 they announced the last big news of the year: Sebastian Markbage, the soul of the React core team, was joining Vercel. As a framework built on React, the future of next.js is closely related to the evolution of React. Especially after the React team put forward the concept of server Component, Sebastian’s technical vision and voice in the React project are inseparable from whether the back-end rendering of Next. Js can be organically combined with the official scheme.

With the completion of the Open Source All-star team, Vercel’s product matrix, from build tools to compilers to development frameworks, is more complete. Contrary to the common perception that open source brings commercial risks, Vercel has become an uncircumventable reliance on open source by recruiting core members and gaining voice in a number of core open source projects. Developers’ engagement with open source projects helps Vercel further build a commercial moat.

Prediction: Vercel’s future and challenges

With a clear understanding of Vercel’s team building and product evolution, it’s worth making bold predictions about its future actions and challenges.

The first step is to continue recruiting Svelte authors, with each deep collaboration with a front-end framework gaining a new set of potential users. In the future, Vercel will most likely recruit from the VueJS Core team, or from the Next. Js alternative to Nuxt in the Vuue. Js ecosystem, or even acquire the Nuxt team as a whole.

Secondly, whether deep integration with Webpack is the right choice is also the question that Next. Js needs to face. When switching to SWC to improve performance, the Vercel team said it would continue to use WebPack and not consider new build solutions such as Vite. Still, we saw a lot of webPack-related questions from the community q&A, as well as complaints from developers that the complexity of Webpack configuration made Next.

The last is the competition with other manufacturers. It goes without saying that competitors such as Netlify will continue to exert pressure on Vercel in terms of products and technologies, and the giants such as AWS and Cloudflare, which are used by Vercel, will also pose great challenges. AWS has a powerful Amplify, and Cloudflare’s Pages and Workers services are gaining customers, and their price and integration might prove too much for Vercel to overcome.

However, Guillermo and Vercel are magical enough to bring new ideas to the mix of open source and commercialization.