Astro Islands

Astro Islands代表了前端Web架構(gòu)的領(lǐng)先范式轉(zhuǎn)變。Astro 將您的 UI 提取到頁面上較小的獨立組件中。未使用的JavaScript被輕量級HTML取代，保證更快的加載和交互時間（TTI）。

術(shù)語“Astro Island”是指HTML的靜態(tài)頁面上的交互式UI組件。一個頁面上可以存在多個孤島，并且一個孤島始終單獨呈現(xiàn)。將它們視為靜態(tài)、非交互式 HTML 海洋中的島嶼。

在 Astro 中，您可以使用任何受支持的 UI 框架（React、Svelte、Vue 等）在瀏覽器中渲染孤島。您可以在同一頁面上混合和匹配不同的框架，或者只是選擇您喜歡的框架。

這種架構(gòu)模式所基于的技術(shù)稱為部分或選擇性水合作用。Astro在幕后利用這種技術(shù)，自動為您的島嶼提供動力。

運作流程

默認情況下，Astro 使用零客戶端 JavaScript 生成每個網(wǎng)站。使用使用 React、Preact、Svelte、Vue、SolidJS、AlpineJS或 Lit構(gòu)建的前端 UI 組件，Astro 會自動提前將其渲染為 HTML，然后刪除所有 JavaScript。 默認情況下，這通過從頁面中刪除所有未使用的 JavaScript 來保持每個站點的快速。

---
// Example: Use a static React component on the page, without JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, Zero JavaScript loaded on the page! -->
<MyReactComponent />

但有時，創(chuàng)建交互式 UI 需要客戶端 JavaScript。Astro 不會強迫您的整個頁面成為類似 SPA 的 JavaScript 應(yīng)用程序，而是要求您創(chuàng)建一個孤島。

---
// Example: Use a dynamic React component on the page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- This component is now interactive on the page! 
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

使用Astro Islands，您網(wǎng)站的絕大多數(shù)內(nèi)容仍然是純的，輕量級的HTML和CSS。在上面的示例中，您剛剛添加了一個孤立的交互性孤島，而沒有更改頁面的其余部分。

優(yōu)點

使用Astro Islands構(gòu)建最明顯的好處是性能：您的大部分網(wǎng)站都轉(zhuǎn)換為快速，靜態(tài)的HTML，并且JavaScript僅針對需要它的單個組件加載。JavaScript 是每字節(jié)加載的最慢的資產(chǎn)之一，因此每個字節(jié)都很重要。

另一個好處是并行加載。在上面的示例圖中，低優(yōu)先級的“圖片輪播”島不需要阻止高優(yōu)先級的“標(biāo)頭”島。兩者并行加載并隔離補水，這意味著標(biāo)題立即變得交互，而無需等待頁面下方較重的輪播。

更好的是，您可以準(zhǔn)確地告訴 Astro 如何以及何時渲染每個組件。如果該圖像輪播的加載成本確實很高，您可以附加一個特殊的客戶端指令，告訴 Astro 僅在輪播在頁面上可見時才加載輪播。如果用戶從未看到它，則永遠不會加載。

在 Astro 中，作為開發(fā)人員，您可以明確告訴 Astro 頁面上的哪些組件也需要在瀏覽器中運行。Astro 只會將頁面上需要的內(nèi)容完全水化，并將您網(wǎng)站的其余部分保留為靜態(tài) HTML。

以上就是Astro Islands靜態(tài)頁面交互式UI組件的詳細內(nèi)容，更多關(guān)于Astro Islands靜態(tài)頁面交互的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論