作者 | Paul Scanlon
譯者 | 張衛濱
策劃 | Tina
本文最初發表於 The New Stack 網站，由 InfoQ 中文站翻譯分享。
你可能已經注意到，React 文檔的「Start a New React Project」部分不再推薦使用 CRA（Create React App）。Create React App 曾經是構建 React 應用程式的首選方式（它只需要客戶端路由和頁面渲染）。但現在，React 文檔建議從支持服務端渲染（server-side rendering，SSR）的流行 React 框架中選擇一個。
我曾經使用「生產級 React 框架」列表中的所有框架構建過應用，但是我也花了很多年的時間構建只需要客戶端功能的 SPA（單頁應用），而且一切運行良好。
雖然有很多應用確實需要伺服器端渲染，但是也有不少的應用並不需要伺服器端渲染。如果選擇 SSR React 框架，可能會引發新的問題而不是解決問題。
什麼是 SPA？
正如這個縮寫所示，SPA 只有一個頁面。SPA 可能有導航，但是當你從一個「頁面」點擊到另一個「頁面」時，你所經歷的是路由，而不是頁面。當導航至一個新路由時，React 會接管並用 HTML 和通常通過客戶端 HTTP 請求獲取到的數據為「頁面」填充內容。
什麼是 SSR？
SSR 應用與之不同。伺服器端渲染的應用實際上是有頁面的。數據來自伺服器，頁面在伺服器上進行編譯，然後將最終輸出作為完整的 HTML 網頁發送到瀏覽器。
如前所述，使用 SSR 需要伺服器，通常涉及到雲供應商。如果你的 SSR 框架只能與一家雲供應商合作，那麼你最終會被供應商鎖定。幸好，像 Remix 和 Astro 這樣的框架是「伺服器無關（server agnostic）」的，所以你可以使用自建的伺服器，或者藉助適配器，在你選擇的雲供應商中啟用 SSR。
SPA 有哪些問題？
一個反覆出現的問題就是「無休無止的加載器（spinner-geddon）」，每當導航到一個新的「頁面」時，都會出現一個加載器動畫，表示正在加載數據，只有在成功完成 HTTP 請求後，頁面才會充滿內容。
SPA 對搜尋引擎優化（Search Engine Optimization，SEO）也不夠友好，因為在谷歌看來，頁面是空白的。當谷歌抓取網頁時，它不會等待 HTTP 請求完成，而是直接查看網頁中的內容，即 HTML，如果沒有 HTML，谷歌又如何對網頁進行排名呢？
正因為如此（以及其他的一些原因），React 應用程式的開發已經轉向伺服器端渲染。但是，雖然上述兩個問題聽起來都很嚴重，但事實真的如此嗎？
開發人員的經典回答很可能是：這要看具體的情況！確實如此，我現在給你們講一個我幾年前創建 SPA 的小故事，你們可以自行判斷。
一個完全可以接受的 SPA
時間倒回到 2018 年，我受僱於一家「技術諮詢」公司，該公司負責為倫敦的一家大型金融機構進行「數字化轉型」。
我的第一個項目是構建一個基於瀏覽器的解決方案，以取代一個過時的授權軟體，該軟體已經無法完成其職責，而且還在耗費公司的資金。這個應用程式僅供內部使用，只有三個用戶，分別是 Margaret、Celia 和 Evelyn，她們是一個令人愉悅的團隊，雖然已經接近退休年齡，但是在公司中發揮著重要的作用。
我創建應用程式耗費了八周時間，它僅使用客戶端 HTTP 請求從 API 獲取數據，具有身份驗證功能，使用現有的 Azure DevOps 流水線進行部署，沒有經過搜尋引擎優化。
Margaret、Celia 和 Evelyn 非常喜歡這個應用，她們不介意偶爾出現的「加載器動畫」，因為這個應用解決了她們的問題。它也為公司解決了一個問題，即不再需要昂貴的軟體許可。我有可靠的消息說，這款軟體至今仍在使用，而且最初的用戶 Margaret、Celia 和 Evelyn 都已經退休了。
SPA 是否依然有價值？
我認為是這樣的，有很多內部應用永遠不會與外部世界接觸，也不需要由 React 驅動的更現代的 SSR 框架所提供的任何功能。但是，既然 React 文檔不再推薦使用 CRA，那麼如果你現在要構建 SPA，那還能使用什麼呢？
將 Vite 與 React 組合使用
Vite 可以與 React 一起使用，並可以作為 Webpack（CRA 使用的模塊打包器）的更現代的替代方案。
「Vite 是一個構建工具，旨在為現代 web 項目提供更快、更精簡的開發體驗。」我想把本文做成一個教程，但發現這完全沒有必要。
「Vite 是一個構建工具，旨在為現代 web 項目提供更快、更精簡的開發體驗。」我想把本文做成一個教程，但發現這完全沒有必要。
Vite 文檔在「Scaffolding Your First Vite Project」部分提供了你需要了解的所有內容。根據 CLI 的提示，你可以在大約 20 秒的時間內創建並運行一個 React 應用。
從上面你可以看到，Vite 不僅是構建 React 應用的最佳選擇，它還適合與其他框架一起使用。
使用 Vite 的主要優勢是什麼？
簡而言之，就是打包。
在開發應用程式時，代碼會被分割為更小的模塊。這使得特性更易於開發，並允許應用的不同組成部分可以共享通用代碼。但是，在某些時候，所有的這些模塊需要打包在一起，形成一個巨大的 Java 文件。瀏覽器需要這個巨大的 Java 文件來運行應用程式。
每當保存文件時都會進行打包（在開發過程中會發生成千上萬次）。使用 Webpack 等工具，打包出的文件必須「拆除」並重建，這樣才能反映出變化。只有在打包步驟完成後，瀏覽器才會刷新，進而讓開發人員真正看到自己的變更。
隨著應用程式的發展，會有越來越多的 Java 添加進來，打包的工作量也會越來越大。隨著時間的推移，打包步驟會變得越來越長，並可能真正影響開發人員的效率。Vite 利用原生 ES 模塊和 HMR（熱模塊替換）解決了這個問題。
有了 Vite，當文件「保存」時，打包文件中只會更新發生變化的模塊。這將大大加快打包步驟，並帶來更高效、更愉快的開發體驗。
使用 Vite 還有許多其他好處，文檔中已有明確說明，請參閱 Why Vite。
最後的想法
世界就這樣，舊的不去，新的不來……但是，React SPA 的傳統依然會持續！
當然，在很多情況下，SPA 並不是最合適的選擇。但是，在 SPA 或 SSR 的問題上，並不是「非此即彼」，而是 「兼而有之」。
突發！「ChatGPT 之父」Sam Altman 被開除，與董事會矛盾早有端倪？
好萊塢大導預測成真，Meta 讓 AI 「一句話生成一部電影」 不再是夢
ClickHouse 彪悍發言：雲數倉死貴死貴的，Snowflake 這種就不應該成為當前主流！
「谷歌有谷歌的規矩」