关于前端:Vercel-与-Nextjs开源全明星团队背后的商业逻辑

视频版本举荐同步观看，喜爱请一键三连～

https://www.bilibili.com/vide…

引子

Vercel 是由 Guillermo Rauch 创建的云服务公司，以领有数个出名开源我的项目为公众所知，随着 2021 年在融资、招聘、产品等方面的高调亮相，Vercel 的商业逻辑也愈发清晰。

背景故事：后端渲染时代

古代前端框架的代表之一 React 于 2013 年开源，与同期其余前端框架一起推动前后端拆散的开发模式直至当初。

而在古代前端框架被宽泛驳回之前，绝大部分网站采纳的是后端渲染的形式输入前端页面。

以一个典型的新闻网站为例，当新闻编辑在后盾（例如一个 CMS）提交一篇文章，文章对应的内容首先会保留在数据库中。让读者拜访这篇文章的 URL 时，后端程序会读取数据库中的内容，并传入前端模板中，渲染失去最终的 HTML 后果后返回给浏览器。

不过这样的形式在性能上较为节约的，因为文章内容公布之后极少须要批改，但数以万计的读者每次关上文章页面都会产生数据库查问与后端渲染的反复开销。一个十分天然的解决办法就是将后端渲染的 HTML 缓存，而这份缓存作为动态内容也更容易推送至 CDN，实现全国甚至寰球减速。即便文章内容须要批改，这套计划也能够通过从新生成再更新 CDN 的形式轻松应答。

因为实现简略、成果出众，这样的架构被广泛应用于各类内容绝对动态的网站中。

背景故事：Guillermo Rauch

Vercel 的当家开源我的项目 Next.js 并不是 Guillermo 的第一个开源我的项目，Guillermo 另外两个被宽泛应用的晚期开源我的项目是 Node.js 的 websocket 框架 socket.io 和 MongoDB 客户端 mongoose，由此可见他在创建 Vercel 之前就曾经有相当深的 Node.js 后端开发功力。

而他同时也是传奇开源我的项目 Mootools 的开发者之一。以现如今的角度看 Mootools 的代码没有太多惊奇之处，并且在同期间的竞争中也没能战败 jQuery。但在这个我的项目的开发者列表中却汇集了一众出名开发者，其中不少人起初都退出 Facebook 参加 React 等前端我的项目的开发，包含 React 团队的灵魂人物 Sebastian Markbåge 和测试工具 jest 的创造者 Christoph Nakazawa 等。不难看出 Guillermo 过后对于前端框架也有深刻的钻研，并且周边有一群将来 React 社区的外围玩家。

Zeit now：极简主义的部署体验

2015 年 Guillermo 创建了名为 Zeit 的公司，并在 2020 年改名为当初更为大家所熟知的 Vercel。2016 年 Zeit 推出了外围产品 now，帮忙开发者轻松将利用部署到云端，拉开了 Vercel 商业化过程的帷幕。

与咱们在背景故事中提到的后端渲染架构相比，Guillermo 过后找到了两个显著的痛点：

1. 这套架构尽管设计并不简单，但在理论施行时却困难重重，往往须要云上部署经验丰富的 devops 帮忙落地，而这也被认为是中大型公司的专利，小公司与集体开发者短少对应的人力。
2. 私有云服务泛滥且逻辑简单，一般开发者想学习并达成最佳实际，所消耗的工夫甚至高于开发利用自身。

以此为出发点，now 诞生了。now 自身并没有开发简单的云上基础设施，而是帮用户将利用部署到 AWS 等私有云上。联合 Guillermo 过往丰盛的 web 利用开发教训，他将域名配置、DNS 解析、SSL 证书、CDN 缓存等一系列工作封装到了产品外部，让用户真正做到一键部署利用，并享受最佳实际带来的性能劣势。

对极简主义的谋求贯通了 Zeit 的产品定义与视觉设计，黑白相间的优雅界面成为了他们最早的名片。

这一阶段 Zeit 基于 now 的商业逻辑曾经清晰：通过简化私有云部署节俭用户人力，通过生产环境最佳实际晋升利用体现。前者不难理解，用户节俭的人力老本能够转换为付费的志愿，后者则是 Zeit/Vercel 继续至今的思路：用户最违心为生产环境付费以晋升稳定性与性能。

而这一模式的难点则是用户如何产生粘性而不是转向老本更低的私有云或者其余定位雷同的部署平台。Guillermo 的答案是从本人精通的 Node.js 与前端技术登程，以开源的形式切入市场。

Next.js：前后端拆散后的产物

随着古代前端框架的风行，越来越多 web 开发从后端渲染转向前后端拆散的开发模式。后端服务不再负责渲染视图，而是以 API 的形式提供数据供不同状态的客户端应用，而本来渲染视图的工作则转移到了前端。

这一形式升高了前后端之间的耦合度、将渲染负载转移到客户端、更容易同时反对桌面端和挪动端网站、前端可能开发更简单的客户端交互，因而迅速地风行开来。

然而架构的扭转也带来了新的问题。拆散之后，后端返回的 HTML 很可能只蕴含了极少数视图，而绝大部分的视图都是在前端通过框架动静渲染，数据也是通过 API 异步加载。这一变动带来的最典型问题就是 SEO 生效，绝大多数搜索引擎都是通过后端返回的 HTML 内容进行索引，但在前后端拆散之后搜索引擎读取到的信息十分无限，也就影响了网站的 SEO 成果。

这一问题使得大量依赖 SEO 的网站没法应用古代前端框架，框架开发者们也将这一问题作为头等大事开始解决。然而以 SSR 为代表的框架后端渲染计划在设计初期通常都存在不易上手、性能差的问题，时至今日也没能造成标准化的计划。

2016 年，Guillermo 看到了这一问题背地的机会，发明了 Next.js，一个开源的 React 下层框架。在之后的几年中，Next.js 继续发力 SSR、SSG、JAM stack 等方向，但万变不离其宗，解决的都是古代前端框架如何后端渲染的问题。同时凭借着对开源社区的深度了解与继续经营，Next.js 也成为了 React 和 Node.js 畛域极受欢迎的我的项目。

Next.js 在开源社区的成绩给 Zeit 带来了新的商业机会。大量开发者开始因为 Next.js 与 Zeit 产生粘性，而应用 Next.JS 之后部署会比一般的动态页面更为简单，为此 Zeit now 适时地深度集成 Next.js，让应用 Next.js 的开发者与我的项目成为 Zeit now 平台中的一等公民。

同样地，背靠 Zeit now 可取得的极简部署体验与生产级别保障，也让 Next.js 与同类开源产品相比有了独特的劣势，进一步壮大了 Next.js。

Vercel：开源全明星团队之上的产品矩阵

随着 Next.js 与 Zeit now 的相辅相成，2020 年 4 月 Zeit 改名为 Vercel 并实现 2100 万美元的 A 轮融资，正式启航。

自那之后，Vercel 陆续实现了 B、C、D 轮融资，总融资额达到 3.13 亿美元，与接连不断地融资同样引入注目的是 Vercel 在招聘上的成绩。

目前 Next.js 的 lead developer Tim Neutkens 就是从社区中走入 Vercel 的。最后 Tim 以开源的形式参加 Next.js，并开发了 Next.js 生态中的重要我的项目 mdx。2017 年，他作为第一个 Next.js 全职研发正式退出 Vercel。

Tim 并不是 Vercel 外部造就的惟一开源明星。国人工程师 Shu Ding 在 Vercel 身兼研发和设计的工作，同时他也主导开发了 React 社区中热门的开源数据申请工具 SWR，在性能上 SWR 也进一步晋升了 Next.js 中的开发体验。

从他们二人身上能够看到 Vercel 外部的工程师与开源文化之深，以及经营推广能力之强。

除了外部造就，Vercel 更让大家津津有味的是他们从出名开源我的项目中开掘人才的能力。

2019 年，Vercel 从 React 的官网脚手架我的项目 create-react-app 中招聘了外围保护中 Joe Haddad，自那之后的几年工夫里 Next.js 的脚手架易用性显著晋升。这次引援中 Vercel 的招聘策略显得非常清晰，作为面向开发者提供服务的商业公司，从开发者重度依赖的开源我的项目中开掘人才能够无效晋升产品竞争力，还能减少本人在开源社区中的话语权。

2021 年起的一系列招聘动作更是如此。

Next.js 为了实现后端渲染，重度应用了 JS 生态中的打包构建工具 webpack。为了加强对 webpack 的了解与话语权，Vercel 招聘了 webpack 的创造者 Tobias Koppers。

因为 JS 须要解决简单的浏览器兼容性问题，绝大部分我的项目都应用了 babel 作为编译工具解决这一问题。Vercel 没有抉择从 babel 社区中招聘，而是将橄榄枝抛给了 SWC 的作者 Donny。SWC 是一个应用 rust 开发的 babel 替代品，并且有高达数十倍的性能劣势。Next.js 的最新版本中也全面应用 SWC 代替 babel。

之后，Vercel 间接收买了 monorepo 构建工具 Turborepo 并将其开源，我的项目创始人 Jared Palmer 也被招入麾下，Jared 同时也是出名开源我的项目 Formik、TSDX 的作者。Vercel 平台上每天都在进行成千上万的构建与编译，SWC 与 Turborepo 这样的高性能工具如果可能被宽泛应用，将为 Vercel 本身节俭大量私有云收入。

仅仅应用 Next.js 吸引开发者应用 Vercel 平台还不足够，Vercel 将眼光投向了其余前端框架。在反对了市面上绝大多数框架的构建与部署之后，Vercel 发表招聘 Svelte 框架的作者 Rich Harris，想必之后 Svelte 也会像 Next.js 一样在 Vercel 平台上取得最粗劣的集成体验。

在大家被 Vercel 接连不断的重磅招聘吸引之时，2021 年底他们又发表了全年最初一个大新闻，React 外围团队的灵魂人物 Sebastian Markbåge 也将退出 Vercel。作为 构建在 React 之上的框架，Next.js 的将来与 React 的演进非亲非故。尤其是在 React 团队提出 server component 的概念之后，Next.js 的后端渲染与官网计划是否可能有机联合，都离不开 Sebastian 的技术视线以及在 React 我的项目中的话语权。

随着开源全明星团队的建成，Vercel 从构建工具、编译器到开发框架的产品矩阵也更加残缺。与通常认知里开源会带来商业危险不同的是，Vercel 通过在一众外围开源我的项目中招聘核心成员、取得话语权，反而成为了开发者无奈绕开的开源依赖，开发者们对开源我的项目的粘性帮忙 Vercel 进一步构建了商业上的护城河。

预测：Vercel 的将来与挑战

梳理分明 Vercel 的团队组建与产品演进思路之后，咱们无妨大胆预测它将来的口头以及须要面对的挑战。

首先连续招聘 Svelte 作者的形式，每与一个前端框架建设深度单干，就可能获取一批新的潜在用户。将来 Vercel 极有可能从 VueJS core team 中进行招聘，也有可能从 Vue.js 生态中的 Next.js 替代品 Nuxt 着手，甚至整体收买 Nuxt 团队。

其次深度集成 webpack 是否是正确的抉择，也是 Next.js 须要面对的问题。在切换至 swc 晋升性能之时，Vercel 团队曾示意会持续应用 webpack，不思考 vite 等新的构建计划。但从社区问答中咱们还是看到了大量 webpack 相干的问题，也有开发者埋怨 webpack 的简单配置让 Next.js 的应用体验不迭预期。

最初则是与其余厂商之间的竞争。同类厂商如 Netlify 不用多说，肯定会在产品与技术上继续对 Vercel 产生压力，而 Vercel 背地所应用的 AWS、Cloudflare 等巨头也将带来微小的挑战。AWS 领有功能强大的 Amplify，Cloudflare 的 Pages 与 Workers 服务也在取得更多的客户，而他们在价格与集成度上的劣势兴许是 Vercel 无奈超越的屏障。

不过无论如何，Guillermo 与 Vercel 曾经足够神奇，也在开源与商业化的联合形式上给大家带来了新的思路。