Astro Islands

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

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

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

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

運(yùn)作流程

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

---
// 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 />

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

---
// 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)容仍然是純的，輕量級(jí)的HTML和CSS。在上面的示例中，您剛剛添加了一個(gè)孤立的交互性孤島，而沒有更改頁面的其余部分。

優(yōu)點(diǎn)

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

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

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

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

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

最新評(píng)論