?譯者 | 李睿

審校 | 孫淑娟

當今軟件開發中最具活力的領域之一是前端架構。而一些創新者正在推動最新技術的發展，以設計出更強大的方法來構建動態用戶界面。這項工作大部分都在以驚人的速度進行，而且是公開的。

多虧有許多開源JavaScript項目，例如SvelteKit、Solid、React、Qwik和Astro，使企業在網絡未來的發展中處于領先地位。以下是理解操作的指南。  

什么是水合？  

改善現代前端架構的大部分活動都集中在水合（hydration）上。為了理解水合作用是什么，以及為什么它是現代前端架構的核心，人們需要了解一些概念。為了實現反應性的奇跡，每個框架都必須處理下圖所示的三個方面。

圖中的基本信息是框架負責構建視圖、保持狀態并管理它們之間的交互（如果熟悉MVC模式，就會得到呼應）。

一旦這三個部分就位，就可以開始了。用戶可以看到頁面并與之交互。  

而默認的方法是簡單地獲取客戶端所需的一切——框架、響應式代碼和狀態，并將其發送過來。然后，客戶端（瀏覽器）執行顯示框架（也就是繪制UI）、解釋JavaScript和綁定狀態的工作。  

這種方法具有簡單性的好處，對于工作中的代碼和試圖理解它的人員來說都是如此。它也有一個很大的缺點：最初的頁面渲染必須等待所有內容，并且用戶必須忍受所有的網絡和瀏覽器波動。這里要小心，否則頁面將重新排列到最終布局中，但頁面并不好看。  

這激發了開發人員嘗試首先在服務器上渲染初始頁面（服務器端渲染，SSR）并將其發送過來。然后，在發送和引導其余代碼和狀態的同時，用戶可以查看合適的頁面。這是一個很好的簡化，但這是基本的想法。

獲得基本布局所需的時間稱為首次內容繪制(FCP)。頁面需要達到的下一個里程碑是通過交互時間(TTI)來衡量的，這意味著用戶能夠實際使用頁面的時間。  

獲取初始頁面并使其具有交互性的過程——即水合作用。  

服務器端渲染的限制  

其底線是服務器端渲染（SSR）傾向于改善首次內容繪制(FCP)但惡化交互時間(TTI)。因此，其目標是在兩者之間取得平衡，同時最大化這兩者，同時希望保持愉快的開發人員體驗（DX）。

在這一努力中，已經提出、采用、放棄、修改和結合了多種方法來改善水合作用。一旦了解實現細節，就會驚訝于它變得多么復雜。首次內容繪制(FCP)和惡化交互時間(TTI) 如何均衡？這聽起來很容易，但事實并非如此。

造成這種復雜性的一個原因是，正處于對所有權衡進行排序的中間。這是一個正在展開的場景。但是，一旦明確前進的方向，應該期望出現的客戶端架構會產生兩個結果：首先，它應該創建感覺“下一代”的網絡應用程序，就像當今精心構建的應用程序提供比幾年前更好的體驗一樣。  

其次，也許更重要的是，改進的客戶端架構應該會產生深遠的影響，而不僅僅是更好的性能。通過深入研究和解決復雜性，前端工程師將為系統和思維找到更好的模型。更好的架構實際上代表了更強大的啟發方法。這會帶來通常無法預測的后續效益。

人們可以通過反應性本身看到這一點。反應性突然出現，是因為它提供了一種將狀態綁定從開發人員的大腦轉移到框架的方法。但好處并不止于此。架構不僅變得更簡單，而且更加一致。這使性能和功能得到全面提升。  

由于現代JavaScript框架同時包含服務器和客戶端，因此這些開發的結果可能會對一般的應用程序架構產生廣泛的影響。  

改善水合作用的方法  

改善水合狀況的基本訣竅是更細致地看待事物。通過將視圖、交互性和狀態分解為更小的部分，可以逐步加載和激活它們，并針對FCP和TTI進行優化。以下是一些方法的介紹。

完全避免JavaScript  

最佳實踐中采用的一種方法是，為那些根本不需要JavaScript的頁面分析站點。這與多頁應用程序（MPA）的新概念有關。它是單頁應用程序（SPA）和逐頁導航（默認Web行為）之間的中間地帶。這里的想法是找到可以立即作為HTML 和資產發布的應用程序部分，從而獲得盡可能最佳的搜索引擎優化（SEO）和加載時間。

例如，在SvelteKit中可以看到無JS方法。當然，這對于那些需要反應式交互的頁面沒有任何作用。框架仍然必須在充當單頁應用程序（SPA）的頁面上解決水合作用。

孤島架構  

Astro倡導孤島架構的理念。其目的是確定頁面的哪些部分是靜態的，哪些部分需要反應性。有了這些知識，可以通過忽略永遠不會更改的框架內容來微調頁面的加載，然后僅根據需要加載其他架構。  

了解這個想法很有用，需要注意它的目標是改進單頁應用程序（SPA）。也就是說，識別的所有靜態內容都可以放在那里，在不影響性能的情況下完成工作。所有客戶端狀態和導航都將得到維護。

從好的方面來說，這種方法允許延遲加載每個孤島，直到發生一些需要它的事情（例如，單擊鼠標滾動到視圖中）。從不好的方面來說，在實踐中，它通常會導致負載發生在特別不合時宜的時刻（就像用戶正在做某事一樣）。  

延遲加載的邊界  

JavaScript庫React的Suspense組件等功能提供了一種方法，可以將基本的水合模型保持在適當的位置，但將其沿邊界分解，然后延遲加載。這樣做的好處是可以保留大部分熟悉的過程，但缺點是需要開發人員進行大量思考和調整才能獲得良好的結果。

此外，延遲加載只能提供這么多幫助，因為框架的大部分內容仍然需要預先交付。  

可恢復性  

可恢復性是Qwik框架引入的一個想法。Qwik深入研究了應用程序的元素，并在它們之間創建了惰性邊界（在某種程度上，可以將其視為一種非常復雜的延遲加載邊界形式）。可恢復性意味著客戶端可以從服務器停止的地方恢復，并以細粒度的方式保持同步。  

服務器組件  

React正在推出服務器組件的想法和稱為流的相關性能改進。以下是對服務器組件如何工作的描述。本質上，服務器組件允許用戶識別應用程序的哪些部分可以完全在服務器上運行，從而避免任何客戶端的渲染損失。  

流媒體  

流媒體是另一種與Suspense相關的不斷發展的React技術。這里的想法是允許在服務器上準備好所有必需的數據之前，將HTML等框架內容發送到客戶端。然后，可以在組件交互發生時應用這種方法。

部分水合或漸進水合

這些條款讓事情變得有點混亂。Astro將其孤島架構描述為部分水合作用。簡而言之，一次只有頁面的某些元素被水合。這有時也稱為漸進式水合作用。這兩個術語有時都適用于其他技術。  

在這里，有三個相互影響的術語：孤島、部分、漸進。無論如何，主要思想是一樣的：需要將應用程序的結構分解成更小的塊，以使其加載更智能。  

分區水合的作用

假設孤島架構指的是靜態框架內的Astro風格的獨立交互塊。

可以說分解用戶界面（UI）的整個想法是部分水合，Astro孤島就是其中一個例子。但是要冒風險，因為Astro孤島已經在那里。此外，部分水合似乎表明水合狀態不完全，這是一種誤導。  

而漸進式水合會引起與漸進式網絡應用程序(PWA)的混淆。也許分區水合作用是表達這個總體想法的一個很好的術語。  

前端架構的演進  

圍繞JavaScript前端架構的活動創建了一些最有趣的代碼工作。這是一個充滿激情的空間，他們正在探索新的概念領域，并進行開創性的編程。他們以開放和協作的方式互動和分享他們的想法。

其中包括RyanCarniato(Solid)和MiskoHevery(Qwik)。兩者都在采用最先進的技術，隨時向世界其他地方發布代碼和信息。

原文標題：??Reactive JavaScript: The evolution of front-end architecture???，作者：Matthew Tyson?