改進的動態WordPress塊的伺服器端渲染

周末，David Gwyer 宣布了一個自定義伺服器端渲染組件 對於塊插件。 WPGO插件的共同創始人主要構建其組件是為了加快自己插件中動態塊的渲染過程。 但是，他現在已經為WordPress社區中的其他塊開發人員發布了此組件。

大多數塊是靜態的。 它們的輸出保持不變，無需更改。 但是，有些塊是動態的。 他們的輸出需要基於多種原因進行更改，例如它們在WordPress中的輸出上下文或其他變化。 例如，核心的「最新帖子」塊是動態的，因為它顯示的帖子隨著新帖子的編寫而改變。 如果將它們作為靜態塊輸出，則最終用戶每次撰寫新帖子時都需要更新該塊。 因此，動態塊會派上用場，因為它們是由伺服器在編輯器和前端中呈現的。

從伺服器進行渲染的問題在於，它的速度可能很慢，尤其是當用戶對某個特定的塊進行多個連續的選項更改時。 每次更改後，都必須重新渲染該塊。 動態塊的核心體驗並不理想。

Gwyer的新組件是 可通過GitHub獲得。 該項目的代碼很少，其主要JavaScript文件的大小剛好超過4kb（未壓縮）。 它引入了一個新的組件，該組件的工作方式與WordPress現有的類似 。 塊開發人員切換到該版本進行快速測試應該不會有什麼麻煩。

他目前正在使用自己的組件 靈活的常見問題解答 插入。 經過幾次測試後，該插件的動態塊感覺更加靈敏，幾乎達到與JavaScript呈現的靜態塊之間幾乎沒有區別的地步。

在編輯器中更新動態塊的選項時，實時渲染。

他還計劃在他的內部使用它 簡單的站點地圖 插件和任何其他未來的動態塊。 那是假設WordPress在此期間並未改善其伺服器端渲染組件。

組件如何工作

Gwyer的組件是核心組件的分支，他說，除了在渲染狀態之間進行轉換之外，該組件還很不錯。 他的自定義組件旨在糾正該問題。 他說：「主要的新增功能是跟蹤先前塊內容以用作佔位符內容的新狀態，以及處理微調框位置的新組件屬性。」

他列出了核心及其組件如何與核心組件渲染一起工作，如下所示：

1. 渲染塊。
2. 塊屬性已更新。
3. 用微調框替換整個塊內容。
4. 渲染新的塊內容。

他的新組件進行了重要的更改，至少帶來了視覺速度的提升：

1. 渲染塊。
2. 塊屬性已更新。
3. 將整個塊內容替換為佔位符內容（當前/先前內容），並在右上角加上微調框。
4. 渲染新的塊內容。

Gwyer說：「由於塊內容基本上保持不變，直到準備好呈現新內容為止，它看起來更快，更流暢。」

真正的問題是，該分叉是否應進入Gutenberg項目並最終合併到WordPress中。 WordPress開發人員Ben Gillbanks如此認為，並創建了一個新的 GitHub票 與請求。

Gwyer說：「我希望看到它添加到Gutenberg中，因為它對於動態塊提供了更好的渲染體驗。」 「如果他們有興趣將其納入核心，我很樂意與團隊聯繫。」

像這樣：

喜歡載入中……

資源