iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

Micro-Frontend 的新夥伴:Astro.js 的應用與研究 系列

Astro.js 發布 3.0 了~

最讓人感到興奮的是它可以有機融合不同的框架

你想在各個頁面的區塊中用 React.js . Vue.js . Svelte.js ...etc , 這個 Micro-Frontend 的願景

Astro.js 幫你完美的實現了 , 接下來的 30 天 , 我們就來看看要如何應用吧 ~

參賽天數 20 天 | 共 20 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 01] 開場白 - 再次挑戰 Micro-Frontend 😅

前言 2021 年 , 提到了 Micro-Frontend 這個名詞 , 並且當初想利用 Web-Component + 30 天的努力 ,來挑戰看看能不能做...

2023-09-16 ‧ 由 Tree 分享
DAY 2

[Day 02] Micro-Frontend 簡介

什麼是 Micro-Frontend ? 簡單來說 , 就是在一個頁面中可以使用多個技術 ( React . Vue . Angular . Svelte......

2023-09-17 ‧ 由 Tree 分享
DAY 3

[Day 03] 你的第一個 Astro 專案

今天我們先跟著 Astro.js 的安裝指南來試用一下 , 事前準備 Node.js - v18.14.1 或更高版本。 文字編輯器 - VS Code 終端...

2023-09-18 ‧ 由 Tree 分享
DAY 4

[Day 04] 分而治理的區塊 - Astro Island

在 day-02 中我們說明了 Micro-Frontend 的起因 , 跟五種已在執行的解決方案 使用 iframe 拼裝 - 古早的解決方式 , 事件傳遞...

2023-09-19 ‧ 由 Tree 分享
DAY 5

[Day 05] 接入 Vue . React 的元件 - Integrations

最近 , 都一直在強調 astro 中 , 可以使用不同的 UI Frameworks , 那實際執行要如何做呢 ? 我們可以查看 astro doc - In...

2023-09-20 ‧ 由 Tree 分享
DAY 6

[Day 06] Client Directives - 設定 JS 不同的生效類型

在昨天的 Vue 範例中 , 我們使用了 <Counter client:idle/> 如果眼尖的邦友一定有注意到 我們在引用 Counter 元件...

2023-09-21 ‧ 由 Tree 分享
DAY 7

[Day 07] Nanostore - 跨越 Island 的資料管理

我們可解到頁面由 Islands 組成代表的每個區塊都分開處理 , 不過有些時候 , 我們還是希望 Islands 中的資料能互通有無 Astro 提供了一個工...

2023-09-22 ‧ 由 Tree 分享
DAY 8

[Day 08] SSG 與 SSR

Astro.js 在預設情況下 , 都是使用 SSG 模式 , 這個模式預先 Generate 要回傳的內容 , 因此可以 Time to Interactiv...

2023-09-23 ‧ 由 Tree 分享
DAY 9

[Day 09] Fetch Data

昨天提到了 SSR 跟 SSG , 可能就是設定上多加一行 export const prerender = true; 不太會有感覺會有什麼差異 ? 今天我...

2023-09-24 ‧ 由 Tree 分享
DAY 10

[Day 10] Adding an Adapter - 部屬到 vercel

之前說明了 , 如何做單頁的 SSR 設定 , 那如果想要全站的設定都改成 SSR 模式呢 ? 只要在 astro.config.mjs 中修改 output...

2023-09-25 ‧ 由 Tree 分享