Vercel 与 Next.js：开源全明星团队背后的商业逻辑
<h1 class="article-title" data-v-e2d9dd00="">Vercel 与 Next.js：开源全明星团队背后的商业逻辑</h1><div class="author-info-block" data-v-e2d9dd00="">
<div class="author-info-box" data-v-e2d9dd00="">
<div class="author-name" data-v-e2d9dd00=""><span class="name" data-v-1800aadb="">aryu</span></div>
<div class="meta-box" data-v-e2d9dd00="">2022-01-26 10:18<span class="views-count" data-v-e2d9dd00="">3616</span></div>
</div>
<div data-v-e2d9dd00=""> </div>
</div>
<div id="article-root" class="article-viewer markdown-body cache result" data-v-e2d9dd00="">
<blockquote>
<p>视频版本推荐同步观看，喜欢请一键三连～</p>
</blockquote>
<p># Vercel 与 Next.js：开源全明星团队背后的商业逻辑｜Monetizing Open Source</p>
<h2 data-id="heading-0">引子</h2>
<p>Vercel 是由 Guillermo Rauch 创立的云服务公司，以拥有数个知名开源项目为大众所知，随着 2021 年在融资、招聘、产品等方面的高调亮相，Vercel 的商业逻辑也愈发清晰。</p>
<h2 data-id="heading-1">背景故事：后端渲染时代</h2>
<p>现代前端框架的代表之一 React 于 2013 年开源，与同期其他前端框架一起推动前后端分离的开发模式直至现在。</p>
<p>而在现代前端框架被广泛采纳之前，绝大部分网站采用的是后端渲染的方式输出前端页面。</p>
<p>以一个典型的新闻网站为例，当新闻编辑在后台（例如一个 CMS）提交一篇文章，文章对应的内容首先会保存在数据库中。让读者访问这篇文章的 URL 时，后端程序会读取数据库中的内容，并传入前端模板中，渲染得到最终的 HTML 结果后返回给浏览器。</p>
<p>不过这样的方式在性能上较为浪费的，因为文章内容发布之后极少需要修改，但数以万计的读者每次打开文章页面都会产生数据库查询与后端渲染的重复开销。一个非常自然的解决方法就是将后端渲染的 HTML 缓存，而这份缓存作为静态内容也更容易推送至 CDN，实现全国甚至全球加速。即使文章内容需要修改，这套方案也可以通过重新生成再更新 CDN 的方式轻松应对。</p>
<p>由于实现简单、效果出众，这样的架构被广泛应用于各类内容相对静态的网站中。</p>
<h2 data-id="heading-2">背景故事：Guillermo Rauch</h2>
<p>Vercel 的当家开源项目 Next.js 并不是 Guillermo 的第一个开源项目，Guillermo 另外两个被广泛使用的早期开源项目是 Node.js 的 websocket 框架 socket.io 和 MongoDB 客户端 mongoose，由此可见他在创立 Vercel 之前就已经有相当深的 Node.js 后端开发功力。</p>
<p>而他同时也是传奇开源项目 Mootools 的开发者之一。以现如今的角度看 Mootools 的代码没有太多惊奇之处，并且在同时期的竞争中也没能战胜 jQuery。但在这个项目的开发者列表中却聚集了一众知名开发者，其中不少人后来都加入 Facebook 参与 React 等前端项目的开发，包括 React 团队的灵魂人物 Sebastian Markbåge 和测试工具 jest 的创造者 Christoph Nakazawa 等。不难看出 Guillermo 当时对于前端框架也有深入的研究，并且周边有一群未来 React 社区的核心玩家。</p>
<h2 data-id="heading-3">Zeit now：极简主义的部署体验</h2>
<p>2015 年 Guillermo 创立了名为 Zeit 的公司，并在 2020 年改名为现在更为大家所熟知的 Vercel。2016 年 Zeit 推出了核心产品 now，帮助开发者轻松将应用部署到云端，拉开了 Vercel 商业化进程的帷幕。</p>
<p>与我们在背景故事中提到的后端渲染架构相比，Guillermo 当时找到了两个明显的痛点：</p>
<ol>
<li>
<p>这套架构虽然设计并不复杂，但在实际实施时却困难重重，往往需要云上部署经验丰富的 devops 帮助落地，而这也被认为是中大型公司的专利，小公司与个人开发者缺少对应的人力。</p>
</li>
<li>
<p>公有云服务众多且逻辑复杂，普通开发者想学习并达成最佳实践，所耗费的时间甚至高于开发应用本身。</p>
</li>
</ol>
<p>以此为出发点，now 诞生了。now 本身并没有开发复杂的云上基础设施，而是帮用户将应用部署到 AWS 等公有云上。结合 Guillermo 过往丰富的 web 应用开发经验，他将域名配置、DNS 解析、SSL 证书、CDN 缓存等一系列工作封装到了产品内部，让用户真正做到一键部署应用，并享受最佳实践带来的性能优势。</p>
<p>对极简主义的追求贯穿了 Zeit 的产品定义与视觉设计，黑白相间的优雅界面成为了他们最早的名片。</p>
<p>这一阶段 Zeit 基于 now 的商业逻辑已经清晰：通过简化公有云部署节省用户人力，通过生产环境最佳实践提升应用表现。前者不难理解，用户节省的人力成本可以转换为付费的意愿，后者则是 Zeit/Vercel 持续至今的思路：用户最愿意为生产环境付费以提升稳定性与性能。</p>
<p>而这一模式的难点则是用户如何产生粘性而不是转向成本更低的公有云或者其他定位相同的部署平台。Guillermo 的答案是从自己精通的 Node.js 与前端技术出发，以开源的方式切入市场。</p>
<h2 data-id="heading-4">Next.js：前后端分离后的产物</h2>
<p>随着现代前端框架的流行，越来越多 web 开发从后端渲染转向前后端分离的开发模式。后端服务不再负责渲染视图，而是以 API 的方式提供数据供不同形态的客户端使用，而原本渲染视图的工作则转移到了前端。</p>
<p>这一方式降低了前后端之间的耦合度、将渲染负载转移到客户端、更容易同时支持桌面端和移动端网站、前端能够开发更复杂的客户端交互，因此迅速地流行开来。</p>
<p>但是架构的改变也带来了新的问题。分离之后，后端返回的 HTML 很可能只包含了极少数视图，而绝大部分的视图都是在前端通过框架动态渲染，数据也是通过 API 异步加载。这一变化带来的最典型问题就是 SEO 失效，绝大多数搜索引擎都是通过后端返回的 HTML 内容进行索引，但在前后端分离之后搜索引擎读取到的信息非常有限，也就影响了网站的 SEO 效果。</p>
<p>这一问题使得大量依赖 SEO 的网站没法使用现代前端框架，框架开发者们也将这一问题作为头等大事开始解决。但是以 SSR 为代表的框架后端渲染方案在设计初期通常都存在不易上手、性能差的问题，时至今日也没能形成标准化的方案。</p>
<p>2016 年，Guillermo 看到了这一问题背后的机会，创造了 Next.js，一个开源的 React 上层框架。在之后的几年中，Next.js 持续发力 SSR、SSG、JAM stack 等方向，但万变不离其宗，解决的都是现代前端框架如何后端渲染的问题。同时凭借着对开源社区的深度理解与持续运营，Next.js 也成为了 React 和 Node.js 领域极受欢迎的项目。</p>
<p>Next.js 在开源社区的成果给 Zeit 带来了新的商业机会。大量开发者开始因为 Next.js 与 Zeit 产生粘性，而使用 Next.JS 之后部署会比普通的静态页面更为复杂，为此 Zeit now 适时地深度集成 Next.js，让使用 Next.js 的开发者与项目成为 Zeit now 平台中的一等公民。</p>
<p>同样地，背靠 Zeit now 可获得的极简部署体验与生产级别保障，也让 Next.js 与同类开源产品相比有了独特的优势，进一步壮大了 Next.js。</p>
<h2 data-id="heading-5">Vercel：开源全明星团队之上的产品矩阵</h2>
<p>随着 Next.js 与 Zeit now 的相辅相成，2020 年 4 月 Zeit 改名为 Vercel 并完成 2100 万美元的 A 轮融资，正式启航。</p>
<p>自那之后，Vercel 陆续完成了 B、C、D 轮融资，总融资额达到 3.13 亿美元，与接连不断地融资同样引入瞩目的是 Vercel 在招聘上的成果。</p>
<p>目前 Next.js 的 lead developer Tim Neutkens 就是从社区中走入 Vercel 的。最初 Tim 以开源的方式参与 Next.js，并开发了 Next.js 生态中的重要项目 mdx。2017 年，他作为第一个 Next.js 全职研发正式加入 Vercel。</p>
<p>Tim 并不是 Vercel 内部培养的唯一开源明星。国人工程师 Shu Ding 在 Vercel 身兼研发和设计的工作，同时他也主导开发了 React 社区中热门的开源数据请求工具 SWR，在功能上 SWR 也进一步提升了 Next.js 中的开发体验。</p>
<p>从他们二人身上可以看到 Vercel 内部的工程师与开源文化之深，以及运营推广能力之强。</p>
<p>除了内部培养，Vercel 更让大家津津乐道的是他们从知名开源项目中挖掘人才的能力。</p>
<p>2019 年，Vercel 从 React 的官方脚手架项目 create-react-app 中招聘了核心维护中 Joe Haddad，自那之后的几年时间里 Next.js 的脚手架易用性显著提升。这次引援中 Vercel 的招聘策略显得十分清晰，作为面向开发者提供服务的商业公司，从开发者重度依赖的开源项目中挖掘人才可以有效提升产品竞争力，还能增加自己在开源社区中的话语权。</p>
<p>2021 年起的一系列招聘动作更是如此。</p>
<p>Next.js 为了实现后端渲染，重度使用了 JS 生态中的打包构建工具 webpack。为了增强对 webpack 的理解与话语权，Vercel 招聘了 webpack 的创造者 Tobias Koppers。</p>
<p>由于 JS 需要处理复杂的浏览器兼容性问题，绝大部分项目都使用了 babel 作为编译工具解决这一问题。Vercel 没有选择从 babel 社区中招聘，而是将橄榄枝抛给了 SWC 的作者 Donny。SWC 是一个使用 rust 开发的 babel 替代品，并且有高达数十倍的性能优势。Next.js 的最新版本中也全面使用 SWC 替代 babel。</p>
<p>之后，Vercel 直接收购了 monorepo 构建工具 Turborepo 并将其开源，项目创始人 Jared Palmer 也被招入麾下，Jared 同时也是知名开源项目 Formik、TSDX 的作者。Vercel 平台上每天都在进行不计其数的构建与编译，SWC 与 Turborepo 这样的高性能工具如果能够被广泛使用，将为 Vercel 自身节省大量公有云支出。</p>
<p>仅仅使用 Next.js 吸引开发者使用 Vercel 平台还不足够，Vercel 将目光投向了其他前端框架。在支持了市面上绝大多数框架的构建与部署之后，Vercel 宣布招聘 Svelte 框架的作者 Rich Harris，想必之后 Svelte 也会像 Next.js 一样在 Vercel 平台上获得最精致的集成体验。</p>
<p>在大家被 Vercel 接连不断的重磅招聘吸引之时，2021 年底他们又宣布了全年最后一个大新闻，React 核心团队的灵魂人物 Sebastian Markbåge 也将加入 Vercel。作为 构建在 React 之上的框架，Next.js 的未来与 React 的演进息息相关。尤其是在 React 团队提出 server component 的概念之后，Next.js 的后端渲染与官方方案是否能够有机结合，都离不开 Sebastian 的技术视野以及在 React 项目中的话语权。</p>
<p>随着开源全明星团队的建成，Vercel 从构建工具、编译器到开发框架的产品矩阵也更加完整。与通常认知里开源会带来商业风险不同的是，Vercel 通过在一众核心开源项目中招聘核心成员、获得话语权，反而成为了开发者无法绕开的开源依赖，开发者们对开源项目的粘性帮助 Vercel 进一步构建了商业上的护城河。</p>
<h2 data-id="heading-6">预测：Vercel 的未来与挑战</h2>
<p>梳理清楚 Vercel 的团队组建与产品演进思路之后，我们不妨大胆预测它未来的行动以及需要面对的挑战。</p>
<p>首先延续招聘 Svelte 作者的方式，每与一个前端框架建立深度合作，就能够获取一批新的潜在用户。未来 Vercel 极有可能从 VueJS core team 中进行招聘，也有可能从 Vue.js 生态中的 Next.js 替代品 Nuxt 着手，甚至整体收购 Nuxt 团队。</p>
<p>其次深度集成 webpack 是否是正确的选择，也是 Next.js 需要面对的问题。在切换至 swc 提升性能之时，Vercel 团队曾表示会继续使用 webpack，不考虑 vite 等新的构建方案。但从社区问答中我们还是看到了大量 webpack 相关的问题，也有开发者抱怨 webpack 的复杂配置让 Next.js 的使用体验不及预期。</p>
<p>最后则是与其余厂商之间的竞争。同类厂商如 Netlify 不必多说，一定会在产品与技术上持续对 Vercel 产生压力，而 Vercel 背后所使用的 AWS、Cloudflare 等巨头也将带来巨大的挑战。AWS 拥有功能强大的 Amplify，Cloudflare 的 Pages 与 Workers 服务也在获得更多的客户，而他们在价格与集成度上的优势也许是 Vercel 无法逾越的屏障。</p>
<p>不过无论如何，Guillermo 与 Vercel 已经足够神奇，也在开源与商业化的结合方式上给大家带来了新的思路。</p>
</div>
<div class="article-end" data-v-e9577d70="" data-v-e2d9dd00="">
<div class="tag-list-box" data-v-e9577d70="" data-v-e2d9dd00="">
<div class="tag-list" data-v-e2d9dd00="" data-v-e9577d70="">
<div class="tag-list-title" data-v-e2d9dd00="" data-v-e9577d70="">标签：</div>
<div class="tag-list-container" data-v-e2d9dd00="" data-v-e9577d70=""><span class="tag-title" data-v-e2d9dd00="">前端</span><span class="tag-title" data-v-e2d9dd00="">开源</span></div>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
漫思<br><br>
来源：https://www.cnblogs.com/sexintercourse/p/17687645.html
頁:
[1]