Vercel和Next.js：开源全明星团队背后的商业逻辑他创办的云服务公司，因拥有多个知名开源项目而为大众所熟知。随着2021年在融资、招聘、产品等方面的高调亮相，Vercel的商业逻辑越来越清晰。背景故事：React作为后端渲染时代现代前端框架的代表之一，于2013年开源，与同时期的其他前端框架一起推动了前端的开发模式-端和后端分离到现在。在现代前端框架被广泛采用之前，大多数网站都使用后端渲染来输出前端页面。以一个典型的新闻网站为例。新闻编辑在后台（如CMS）提交文章时，会先将文章对应的内容保存到数据库中。当让读者访问本文的URL时，后端程序会读取数据库中的内容，传入前端模板，渲染最终的HTML结果返回给浏览器。但是这种方式在性能上是比较浪费的，因为文章内容发表后很少需要修改，但是每次数以万计的读者打开文章页面，都会产生数据库查询和返回的重复开销-结束渲染。一个很自然的方案就是把后端渲染出来的HTML缓存起来，这个缓存更容易作为静态内容推送到CDN，实现全国乃至全球的加速。即使文章内容需要修改，这种方案也可以通过重新生成和更新CDN轻松应对。由于实现简单，效果突出，这种架构被广泛应用于各种内容相对静态的网站。背景故事：Next.js是GuillermoRauchVercel的开源项目，并不是Guillermo的第一个开源项目。Guillermo的另外两个广泛使用的早期开源项目是Node.jswebsocket框架socket.io和MongoDB客户端mongoose。可见他在创立Vercel之前就已经具备相当深厚的Node.js后端开发功底。他也是传奇开源项目Mootools的开发者之一。从现代的角度来看，Mootools代码并不太令人惊讶，而且它并没有同时在竞争中击败jQuery。但在这个项目的开发者名单中，有很多知名的开发者，其中不乏后来加入Facebook参与React等前端项目的开发，其中就包括React团队的灵魂人物SebastianMarkb?ge，和Christoph，测试工具jestNakazawa等人的创造者。不难看出，当时Guillermo对前端框架也有着深入的研究，他的身边也有一批未来React社区的核心玩家。Zeitnow：极简部署体验2015年，Guillermo创立了一家名为Zeit的公司，该公司在2020年更名为现在更为人所知的Vercel。2016年，Zeit推出核心产品now，帮助开发者轻松将应用部署到云端，拉开了Vercel商业化进程的序幕。对比我们在背景故事中提到的后端渲染架构，Guillermo当时发现了两个明显的痛点：这种架构的设计虽然并不复杂，但在实践中实现难度较大，往往需要云部署经验丰富devops助力落地，这也被认为是大中型公司的专利，小公司和个人开发者缺乏相应的人力。公有云服务众多，逻辑复杂。普通开发人员想要学习和实现最佳实践，花费的时间甚至比开发应用本身还要多。以此为起点，现在诞生了。现在本身并不开发复杂的云基础设施，而是帮助用户将应用部署到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看到了这个问题背后的机会，创建了开源的React上层框架Next.js。在接下来的几年里，Next.js在SSR、SSG、JAMstack等方向不断发力，但始终如一，解决了现代前端框架如何渲染后端的问题。同时，凭借对开源社区的深刻理解和持续运营，Next.js也成为React和Node.js领域非常热门的项目。Next.js在开源社区的成功给Zeit带来了新的商机。大量的开发者因为Next.js而开始坚守Zeit，使用Next.JS后的部署会比普通的静态页面复杂。为此，Zeit现在适时深度集成了Next.js，让使用Next.js的开发者成为Zeitnow平台项目的一等公民。同样，依托Zeitnow所能获得的极简部署体验和生产级保障，也赋予了Next.js与同类开源产品相比独特的优势，进一步壮大了Next.js。Vercel：开源全明星团队之上的产品矩阵借助Next.js与Zeitnow的互补，Zeit于2020年4月更名为Vercel，并完成2100万美元A轮融资，正式扬帆起航。此后，Vercel先后完成B、C、D轮融资，融资总额达3.13亿美元。与持续融资一样，Vercel在招聘方面的成绩也备受瞩目。Next.js的现任首席开发人员TimNeutkens从社区来到Vercel。最初，Tim以开源的方式参与了Next.js，并开发了Next.js生态中的重要项目mdx。2017年正式加入Vercel，成为第一位Next.js全职开发者。Tim并不是唯一在Vercel中成长的开源明星。中国工程师ShuDing在Vercel从事研发和设计工作。同时，他还主导了React社区流行的开源数据请求工具SWR的开发。在功能上，SWR进一步提升了Next.js的开发体验。从他们两人身上，我们可以看出Vercel内部工程师和开源文化的深度，以及强大的运营和推广能力。除了内部培训，Vercel让大家津津乐道的是他们能够从知名的开源项目中挖掘人才。2019年，Vercel从React的官方脚手架项目create-react-app聘请了核心维护者JoeHaddad，从那以后，Next.js的脚手架易用性有了显着提高。本次签约维塞尔的引援策略非常明确。作为一家为开发者提供服务的商业公司，从开发者高度依赖的开源项目中挖掘人才，可以有效提升产品竞争力，增加他们在开源社区的知名度。话语权。尤其是2021年开始的一系列招聘动作，Next.js为了实现后端渲染，大量使用了JS生态中的打包构建工具webpack。为了加强对webpack的理解和话语权，Vercel找来了webpack的创始人TobiasKoppers。由于JS需要处理复杂的浏览器兼容性问题，所以大部分项目都使用babel作为编译工具来解决这个问题。Vercel并没有选择从babel社区招聘，而是向SWC的作者Donny抛出了橄榄枝。SWC是使用Rust开发的babel替代品，性能优势高达数十倍。最新版本的Next.js也完全使用SWC而不是babel。之后，Vercel直接收购了monorepo构建工具Turborepo并开源。项目创始人JaredPalmer也被招募。Jared还是知名开源项目Formik和TSDX的作者。每天在Vercel平台上进行无数次构建和编译。如果SWC、Turborepo等高性能工具能够得到广泛应用，将为Vercel自身节省大量的公有云开支。仅使用Next.js不足以吸引开发人员使用Vercel平台，Vercel将目光投向了其他前端框架。在支持了市面上大部分框架的构建和部署后，Vercel宣布招募Svelte框架的作者RichHarris。想必Svelte也会像Next.js一样在Vercel平台上获得最精致的集成体验。当所有人都被Vercel连续的重磅招聘所吸引时，2021年底他们公布了今年最后一个大新闻。React核心团队的灵魂人物SebastianMarkb?ge也将加入Vercel。作为构建在React之上的框架，Next.js的未来与React的发展密切相关。尤其是React团队提出server组件的概念后，Next.js的后端渲染能否与官方方案有机结合，离不开Sebastian在React项目的技术眼光和话语权。随着开源全明星团队的成立，Vercel从构建工具、编译器到开发框架的产品矩阵也更加完善。与开源会带来商业风险的普遍认知不同，Vercel在多个核心开源项目中招募核心成员并获得话语权。相反，它成为开发人员无法绕过的开源依赖项。这种粘性帮助Vercel进一步建立了商业护城河。预测：Vercel的未来与挑战在梳理了Vercel的团队建设和产品演进思路后，我们不妨对其未来的行动和需要面对的挑战进行大胆的预测。首先，继续招募Svelte作者的方式。每一次与前端框架建立深度合作，我们都可以获得一批新的潜在用户。未来，Vercel极有可能从VueJS核心团队招兵买马，或者从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已经足够了不起了，他们在开源和商业化相结合的方式上也给大家带来了新的想法。
