精簡的 SaaS 技術棧

Lean SaaS Stack by Tenten

這是 Tenten 較常使用的 Lean SaaS 技術棧。此 SaaS Stack 的設計想法主要是基於幾個大方向：

免費或起步成本低廉。我們不想僅為了驗證一個簡單的想法的建構初期就必須支付大筆的費用，所以選擇的工具必須是開放原始碼或是有較彈性的費用選擇。
能自動且無限制地擴展。
盡可能的使用低/無程式碼: 做到一個人應該能夠運行並維護整個技術棧，未來維護的這人有可能是其他的開發者。
別重複發明輪子 (don't reinvent the wheel) : 寧願專注於我們的產品想解決的商業問題與痛點，而不是花時間在認證和帳單 API 這類的事情上。

所以如果你也在尋找這種類型的技術棧，以下為你介紹。

Webflow, Outseta, Sanity, and Next.js — Lean SaaS Stack

核心平台

Webflow：我們使用 Webflow 來建立主網站。由於面向消費者的網站通常用於行銷，在這裡選擇了無程式碼的解決方案。這使得在必要時能輕鬆地交付給自由工作者或市場營銷團隊。Webflow 也有很多可用的 Template 與 Clonable，可以從中複製/粘貼你需要的部分。通常，這樣的網站開發過程不會超過三天。
Sanity：用 Sanity 作為管理儀表板和資料庫。Sanity 基本上是一個資料庫，同時自動提供一個非常乾淨和可定製的儀表板介面。我以前使用 Firebase，但當我想將控制權交給不擅長技術的人時，效果並不好。
Outseta：CRM - 用於帳單，使用者和團隊帳戶，用戶帳單儀表板，及自動化電子郵件營銷。這裡有很多重要的功能。這是此列表中唯一沒有免費版的工具。但考慮到它的功能，以及他們只收取銷售的 1%，而它幫我們解決了很多問題並讓我們不需要投入開發或擔心的很多事情。當然 Outseta 還有很多其他的功能，這些都是我們使用它的原因。
Next.js：我們在 Next.js 中建立用戶儀表板和 API。整合 Outseta 來控制儀表板的內容，並從 Sanity 查詢 API 密鑰，用戶數據或您的應用可能需要的其他資料。

雖然我們使用的工具還有很多，但這些都是我們幾乎每個 SaaS 項目都會使用的主要工具。下面我會更深入地探討我們選擇這些技術棧的邏輯。

架構

我們選擇將前端拆分到幾個子域名中。它會根據 SaaS 的需求而變化，但通常的 SaaS 前端可能像這樣：

example.com：主要的市場營銷網站，使用 Webflow 建立。
app.example.com：用戶儀表板，使用 Next.js 建立。透過 Outseta 登入門戶，並使用來自 Sanity 的數據。
admin.example.com：管理員儀表板，使用 Sanity 建立。這是我可以查找有關我的用戶的資訊，並在必要時代表他們編輯數據的地方。
docs.example.com：技術文件，使用 Docusaurus 建立。

將你的網站分成較小的子域名對於小型創業公司特別有用，因為你可以很容易地轉向。如果你的博客需要改變，你不必也改變你的文件，電子商務和登陸頁。你只需要改變你的博客平台，而不會對你的技術棧的其餘部分產生任何副作用。靈活性對於新創公司非常重要。你可以，也應該，根據用戶反饋頻繁地調整事物。

有些人認為這會造成技術棧部分之間的經驗不連貫。但我們認為，當滿足用戶在他們旅程的不同部分時，UI 應該是不同的。例如，你的付費客戶在你的儀表板中工作時，可能不需要看到你的 CTA 在導航中，因為他們已經在付費了。在某些情況下，過度讓用戶看到不適合他們的路徑實際上可能會降低轉換率。保持你的轉換路徑簡單明瞭，並根據你的客戶在那一刻的需求進行定製。

基礎架構

將用戶儀表板 (Next.js) 和管理員儀表板 (Sanity) 都保留在單一存儲庫 (Monorepo)中。這使得管理更為方便，並使我能夠在必要時對兩者都重用相同的代碼。

GitHub：用於源代碼管理，並使用 GitHub Actions 計劃任務和穩定且自動化的工作流程。
Vercel：我們的技術團隊擅長 Next.js, React 等技術棧，因此 Vercel 也自然是我們建構網站的首選，。
Namecheap or GoDaddy：域名註冊商和電子郵件伺服器。
Cloudflare：全世界最多用戶使用的 DNS 托管服務，並同時提供 CDN 緩存。
Gmail：電子郵件客戶端，連結 Google Workspace 使用自定域名的 Email。
Stripe：付款處理 - 獨立使用或綁定於 Outseta 中。有時候我們不直接使用 Stripe，因為它需要大量的自定義代碼來設置，並將數據與 CRM 連接。使用 Outseta 進行這些事情可以節省很多時間。Note: 需要美國公司與銀行才能夠申請使用，如台灣人身分需要成立美國公司可參考 Cocobase。
Webflow: 這不用多做介紹了，Tenten 是亞太地區最早引進 Webflow 服務的代理商，我們提供了眾多教學資源, 與技術文件回饋於社群，並有一個專業的 Webflow 線上課程幫助大家快速入門到專精 (適合創業者, 設計師, 行銷人員, 甚至是開發者) 。為什麼選擇 Webflow?
Firebase, Supabase: 如果有使用 Database 需求的話這兩種是我們較常用的，但如果是要更微型一點的資料庫需求，透過 Airtable + Zapier 也是不錯的輕量選擇
Zapier: No Code tool - 讓您連接應用程式並自動化工作流程

語言和框架

JavaScript (TypeScript)：我們在前端和後端都使用的編程語言。由 Next.js 和 Sanity 兩者使用。
React：UI 框架，由 Next.js 和 Sanity 兩者使用。由於 React 是目前最流行的 UI 框架，你會很容易找到你可以利用的開源項目，這將為你節省大量的時間。
Tailwind CSS：我們習慣使用的 CSS 框架，這個可以滿足大部分的需求。

選擇適合的工具

我們曾與很多新創聊天，發現他們在初期都會被技術團隊建議而陷入一種要 "選擇最好的技術", 或 "最新的技術", 導致產品最後因為製作過程拖的太長因成本考量導致失敗並花費了無謂的資源去重構。

實際情況是: 竟然要創新，一開始一定要能夠快速的落地，用最精簡的成本與時間效益找到 Product Market Fit 才是 SaaS Startup 初期能夠掌握成功的不二法門。追隨那些新技術的背後我會建議他們等到過了 A 輪的投資之後再來考慮。

Be Lean: 在初期是所有支撐成功新創想法的重要元素。

我們並不總是使用以下這些工具，但在某些情況下，它們可能是有用的：

Crisp：聊天與客服支援軟體。我們發現當你的產品還沒有成長到足夠規模可以支付 ZenDesk, HubSpot Service Hub, Intercom 這類客服軟體時，我們發現像 Crisp, ManyChat 這類較簡易功能的 SaaS 可以讓你用很低的成本就可以開始使用，並且它們都有 App 應用程序可以使管理服務台工作更加容易。
Sendgrid or Amazon SES：每當我們需要超出Outseta所發送的更為複雜使用案例的交易郵件時，會使用這類的電子郵件API。
Gumroad：有時我們會選擇使用 Gumroad 而不是 Outseta。當你有像電子書或源代碼這樣的簡單產品，並且不需要為你的客戶提供完整的儀表板時，它非常好用。
Docusaurus：如果產品是技術性的，我們會用 markdown 寫文件，並用 Docusaurus 生成文檔網站。如果產品不是技術性的，我們不需要像 Coding Highlight 這樣的技術文件功能，我們就把文檔放在 Webflow 網站上。
CloudFlare R2 (or AWS S3)：你可以將圖像上傳到 Sanity，但如果你的產品需要大量的用戶生成的圖像 (User generate content)，Cloudflare R2 或 AWS S3 這類儲存服務在高用量時會便宜很多。

總結

以上的軟體費用每月約40-60美元，具體取決於使用情況。當剛剛啟動時，我們只需要支付域名費用，及Outseta。直到你的使用超過免費層級，其他所有東西都是免費的。但在那個時候，你應該有持續的收入來支付使用成本。所以只要你的產品定價正確，你就不用擔心開銷。如果可能的話，嘗試設置你的價格，使你的整個月開銷只用一個客戶就可以支付。

另一個主要好處是開發時間短。由於該技術棧大多是低代碼，因此開發速度相當快。當然，這完全取決於你想要建造什麼。但是一般來說，我只需要從一些模板構建/複製一個 Webflow 網站，添加需要的 schema 到 Sanity，並將需要的 APIs，表格等添加到 Next.js，以便用戶可以訪問和操作他們的數據。無需手動建立管理員儀表板，設置身份驗證，或者根據模型從頭開始建立營銷網站。通常我在幾周甚至幾天內就可以搭建起一個最小可行性產品。

當然，這只是對我們有效的技術棧。在決定對你來說什麼是最合適時，你應該依靠你自己的判斷，技能和經驗。如果你是幫客戶打造產品，那你應該根據客戶的技能和需求來選擇你的工具。