AstroでClientRouterを使う上で詰まったこと

なぜClientRouterを使うのか

View Transitions APIを使うために、ClientRouterを使う必要がありました。

詰まったこと

ページが読み込まれたタイミングで実行したいコードがありました。

<script></script>に直で関数を呼び出すコード及びonloadイベントで呼び出すコードは、ClientRouterを使うとページ遷移のたびに実行されないようであるため、期待通りに動作しませんでした。

解決策

astro:after-swapイベントを使うことで、ページが読み込まれたタイミングでコードを実行できました。

https://docs.astro.build/en/guides/view-transitions/#script-re-execution

document.addEventListener("astro:after-swap", () => {
  // ページが読み込まれたタイミングで実行したいコード
});

まとめ

Astroなんもわからんぞよ