Astro

AstroはDeno Freshと同じIsland Architectureを採用したフルスタックフレームワークです^astro。UI部分に使える言語はPreactだけでなく、React, Vue, Svelte, Solid, LitやAstroの独自言語も利用できます^{astro_support_lang}。 またデプロイ先もDenoだけでなく、AWSやVercel、GitHub Pagesなどにもデプロイできます^astro_deploy。

Astroではclientディレクティブをコンポーネントに指定することでHydrateできるようになります。

src/pages/index.astro
1
---
2
// Example: hydrating framework components in the browser.
3
import InteractiveButton from '@components/InteractiveButton.jsx';
4
import InteractiveCounter from '@components/InteractiveCounter.jsx';
5
---
6

7
<!-- ページがロードされてから、JavaScriptのインポートを開始 -->
8
<InteractiveButton client:load />
9

10
<!-- コンポーネントがスクロールなどによって、画面上に表示されてから、JavaScriptのインポートを開始 -->
11
<InteractiveCounter client:visible />