視訊版本推薦同步觀看，喜歡請一鍵三連～
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 當時找到了兩個明顯的痛點：
- 這套架構雖然設計並不複雜，但在實際實施時卻困難重重，往往需要雲上部署經驗豐富的 devops 幫助落地，而這也被認為是中大型公司的專利，小公司與個人開發者缺少對應的人力。
- 公有云服務眾多且邏輯複雜，普通開發者想學習並達成最佳實踐，所耗費的時間甚至高於開發應用本身。
以此為出發點，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 已經足夠神奇，也在開源與商業化的結合方式上給大家帶來了新的思路。