引言

我寫下這篇文章的初衷是，我認識到，編寫代碼的同時，我們也需要去分享我們的工作和成果，讓更多的人瞭解我們所做的事。這篇文章旨在記錄我的第一個近200 Star 的項目 tarojs-plugin-ssr，能讓更多的人去知道這個項目，瞭解到這個項目還被持續維護中。

我將在文章中講講這個項目的起源，回顧我與 Taro 項目的故事。同時，根據我有限的經驗，來回答一些朋友們關於如何參與開源項目的疑問。

項目的狀態

先來介紹一下 Taro H5 SSR 插件這個項目：

• 地址：https://github.com/NervJS/tarojs-plugin-ssr
• 目的：讓 Taro H5 支持 Pre-rendering、SSR 和 ISR，極致的首屏速度🚀，利於 SEO🔍
• 狀態：截止2023年8月5日為止，該項目共197個 Star，381次提交，4位貢獻者，發佈了61個版本
• 最新版本：2.1.1
• 架構設計：https://github.com/NervJS/tarojs-plugin-ssr/blob/main/ARCHITECTURE.md

這個項目首次在 Taro 社區中面世是在 Taro v3.5 beta 這篇官方博客中。

在該插件初次發佈時，它還處於 beta 版本階段，所以我在文章中特意強調了“插件目前處於早期建設中，不建議用於生產環境！”。然而，許多人是從這篇文章中首次瞭解到 Taro H5 SSR 這個插件的。由於我在接下來的時間裏未能充分宣傳這個項目，許多人並不瞭解該插件在2022年6月26日已經發布了1.0.0正式版並且已經完全適合在生產環境中使用。

當我還在百度任職期間，百度健康醫美 這個項目就已經使用該插件實現 SSR 並上線。其表現出色，全網 LCP 80 分位小於 1s，實現秒開。此外，據我瞭解，即使在我離開之後，百度內部仍有項目繼續採用這個方案。

目前，Taro H5 SSR 插件已經被納入 Taro 官方 GitHub 組織中，作為官方推薦的插件。

如果你的項目有 SSR 的需求，歡迎到項目主頁查看其詳細使用方法。若你覺得這個項目對你有所啓發或幫助，不妨給它一個 Star，你的支持對我來説非常重要。

項目的推進

實際上，自2022年7月起，我已展開新的職業生涯。雖然作為項目創建者的我現在的工作並未涉及到 Taro 開發，但我依然為這個項目付出了持續的努力和精力。以下是對我的項目貢獻的一些詳細介紹。

React 版本的 Taro 組件庫

Taro 倉庫的 H5 端為了實現跨 React、Vue 框架的功能，採用了 Web Components 進行開發。然而，這樣並不便於 SSR。因此，Taro H5 SSR 插件開發了一套與原生屬性完全一致的，基於 React 實現的組件庫。在 2.0.0 版本中，這套基於 React 的 Taro 組件庫獨立成為 @taror/components 包。關於這個組件庫的詳細文檔，你可以訪問：tarojs-plugin-ssr 進行預覽。

Taro3 的 H5 端組件庫是基於 Web Components 並使用 Stencil 框架進行開發的。但在移動端，Web Components 遇到了一些問題：

1. 在安卓 4.4 版本下出現白屏
2. 多行文字截斷功能失效
3. 部分安卓設備（尤其是 OPPO、VIVO），切換 visibility 樣式失敗，導致頁面白屏

所以我認為該組件庫對於原本的 Taro H5 SPA 應用也是有意的。因此，我基於實現的 React 組件庫，開發了 taror-components-compat 項目，能夠將 Taro 的 Web Components 組件替換為 React 組件。

降低插件的接入門檻

參考 ava 的實現方式，你現在可以通過執行 npm init tarojs-plugin-platform-nextjs 命令快速集成該插件。

這個命令將自動完成以下操作，幫你輕鬆配置 Taro 項目：

1. 在項目中安裝此插件以及 next
2. 在 Taro 編譯配置文件中引入本插件
3. 在 package.json 文件中添加開發（dev:nextjs）和構建（build:nextjs）命令

逐步對齊 Taro 的全部功能

要完全對齊 Taro 的所有功能，還需要我們付出更多的努力，並且不斷地跟進 Taro 的版本升級。以下是我們近期已經完成的一些工作：

1. 為 Taro v3.5.0+ 版本中新增的 Hook 提供了支持。
2. 對 Taro 編譯配置中全部 PostCSS 設置的支持。
3. 實現了對 Less 的支持，從而可以使用 taro-ui 組件庫。
4. 增加了更多的示例，説明如何使用本插件：https://github.com/NervJS/tarojs-plugin-ssr/tree/main/examples 。

上述內容大致介紹了這個項目的最新情況，以及我所做的一些工作。接下來，我想分享一些更個人的故事，包括這個項目的起源，我與 Taro 項目的交集，以及我如何參與到這個開源項目中，最終成為技術委員會的一員，以及在這個過程中我做了的事情。

設計了一個 Logo

為了增強項目的專業度，我首次為自己的項目設計了一個 Logo。從個人的角度來看，我覺得設計的還不錯。

和 Taro 故事的開始

在我先前的工作經歷中，我們的團隊使用了 Taro 框架進行開發。這個框架讓我們能夠編寫一份代碼，然後就可以同時在 h5、微信小程序和百度小程序上運行，進而實現高效的跨平台開發。這樣的工作經歷使我開始更深入地關注 Taro 項目及其社區。一方面，我在遇到工作中的問題時能從社區中尋找解答；另一方面，我對 Taro 框架的內部運作機制有着濃厚的興趣

2020年下半年，Taro 推出了里程碑式的3.0.0版本，這次更新將 Taro 的跨端解決方案從編譯時切換至運行時，這是一次重大的變革。在初始階段，新版本的穩定性存在一些問題，這也正是我開始積極參與 Taro 項目貢獻的契機。

我最早是通過解決 issues，特別是針對百度小程序的 bug，開始參與到項目中來的。在這個階段，我一共提交了 17 次 pull request。

我還在朋友圈明確聲明瞭我的目標——爭取成為 Taro 的核心貢獻者。

由於我們團隊的項目仍然運行在 Taro2，我於是開始計劃將其升級到 Taro3。鑑於項目代碼量龐大，且 Taro2 到 Taro3 的升級過程中存較多 break change，手動進行修改並不現實。因此，我開發了一個名為 taro2-to-3 的工具，以便自動完成 Taro2 項目到 Taro3 項目的升級工作。

最終在2021年我進入到了 Taro 的技術委員會中。

還收到了 Taro 團隊發來的禮物。

許多同學經常會問如何參與到一個開源項目。我能提供的經驗是，可以先以你的工作內容為起點，對使用的工具保持好奇心，遇到問題時有追查到根因的習慣。可以從現有的 issue 開始，或者響應社區用户的需求。至於成為核心貢獻者，更多的是運氣和時機——比如在項目的某個階段初期，你正好有機會作出重要貢獻。

話説回來，目前 taro-ui 非常需要貢獻者，如果你對此感興趣，可以嘗試與 Owner 聯繫。

Taro H5 SSR 插件故事的開始

開發這個插件的初衷源自於工作中的需要。為了追求極致的首屏速度和更優秀的 SEO 效果，我們團隊開始逐步推廣 SSR 技術。起初的幾個項目都使用 Next.js 實現，自然後續我負責的項目也要使用 Next.js 實現 SSR。項目基於 Taro 開發，為實現 SSR，將 H5 端單獨拆分為一個獨立的代碼倉庫，由 Next.js 實現。

在後續的迭代中，這種做法的問題被逐漸放大。每次需求，我都不得不在兩個代碼倉庫中編寫重複的代碼。但是在這個項目中，讓我徹底瞭解了 Next.js 和 SSR 技術，於是便有了一個想法，將 Next.js 框架視為一個平台，就像微信小程序、百度小程序一樣將 Taro 代碼編譯到該平台上。

讓我感到非常有成就感的是，這是一種全新的 Taro 實現 SSR 的思路。在 Taro 團隊的用户調研中，SSR 一直是用户期望在 Web 端實現的功能。

Taro 團隊一直未能實現 SSR 的原因是，要實現一個能夠在生產環境中穩定、高效且安全的 SSR 功能需要耗費大量的人力和維護成本，這對於Taro團隊來説是一項巨大的挑戰。但是，通過採用新的實現思路，SSR 的能力完全由 Next.js 提供，我們只需要關注如何將 Taro 項目代碼編譯成一個完整的 Next.js 項目，這個過程的成本相對較低。

我記得非常清楚，那是2022年的清明節前夕，我向 Taro 技術委員會中的其他成員提出了我的這個想法，他們也認為這個想法可行。因此，在清明節開始的時候，我開始了項目的編碼工作。儘管只有短短的3天假期，但我還是開發出了一個 MVP 版本，並驗證了這個想法的可行性。

於是，這個項目就這樣啓動了。在我的 Leader 的同意下，我開始將這個時期並不成熟的插件應用於我們的項目中。在此我想再次感謝我的 Leader 鈺哥，他是我的一位良師益友，他出色的溝通能力和對下屬的信任讓我印象深刻。

後來直到現在

由於更換了工作，作為這個項目的創建者，我現在的工作已經和 Taro 開發無關，因而無法為其持續投入必要的精力進行維護。此刻，我正在尋找對此插件感興趣且願意進行貢獻的熱心者。如果你有熱情並且對本項目感興趣，請通過添加微信號：SharpYourMind 與我取得聯繫。

我還有一些其他的與 Taro 相關的項目，如果你感興趣，歡迎你加入：

• 使用 Svelte 開發 Taro 的插件 - tarojs-plugin-svelte
• 一個使用 Svelte 開發的網易雲音樂小程序 - netease-cloud-music

最後的最後

不知不覺地，已經講述了很多有關我和 Taro 以及 Taro H5 SSR 插件的故事。在寫作的過程中，我想起了很多有趣、難忘的回憶。我非常希望，Taro 項目能夠不斷髮展，讓開發者的工作更加愉悦，並以更加開放的方式吸引更多開發者參與其中。同時，我也希望 Taro H5 SSR 插件能夠繼續存活並滿足開發者的需求。我也希望 Taro 團隊的其他成員能夠更多地參與社交媒體和技術社區，你們實在是太低調了！