Astro
https://gyazo.com/b6ba06ad2103a297a275f827ac62700e
2023/12
もうv4.0.8らしい
2021年前半頃に開発開始
Component指向で実装する
build時にdefaultで全てのJSを消去し、HTML/CSSのみを配信する
本当に必要な箇所だけJSを残す
Islands部分(JSを残す部分)は、ReactやSolidJSやVueなど、好きなlibraryを使える
これらは併用できる
混ぜてみた記事。試したってだけで特に意義はない
React, Svelte, Vueを併用している
各islandsは独立しているため、個々にhydrationを行える
例えば、viewport内のものを先にhydrationする、などの優先順位付けができる
astroのページのロゴを右クリックすると、コンテキストメニュー出さずにロゴ一覧のページに飛ぶ
Astroが本当によく出来てるわ。SSGするならAstro1択って感じで本当に細かいところまで機能やら色々あるわ。 そんな感じなんだmrsekut.icon
SSGする
build時にJSを消去し、HTML/CSSのみを配信する
普通に<Hoge />のように書いたらJSは完全削除、
明示的に<Hoge client:load />のように書くことでJSを残す
SSRもサポートしている
v2が出た
2023/1
Next.jsに比べて何が優れている？
Astro vs. SPA (Next.js) - 94% JavaScriptを削減
Astro vs. SPA (Next.js) - 34% ロードが速い
Astro vs. SPA (Next.js) – ネットワーク使用量を65％削減
こんなん、結局全部client:load的なことを書くことにならへん？
JSを使っているのに、使わないと判断することとかあるのか？
あるいは機械的に「このComponentは内部でJS使ってないから使わん」みたいな判断はできないのか
それは難しすぎるか
e.g. client:load
AstroのComponent
code:src/pages/index.astro(tsx)
---
import { Hoge } from '../components/MyFirstIsland';
---
<Hoge client:load />
2つの---で区切るのもそういうものらしい
キモい