はじめに

AstroでViewTransitionを使っているときにdocument.addEventlistener('DOMContentLoaded', () => {})でページロード時に実行したいスクリプトが発火しない現象が起こりました。

原因はViewTransition有効時はデフォルトでPrefetchも有効になっているので、ページ遷移前にDOMを読み込んでしまってイベントの発火タイミングが上手いこといかなかったのかなと思います。

ドキュメントを読み返してみたらすぐに解決できたので結論だけ書き残しておきます。

結論

astro:page-loadedというそれ専用に用意されたイベントがありました。

<script>
  document.addEventListener('astro:page-load', function () {
    // 処理を書く
  })
</script>

参考

ビュートランジション

ビュートランジションを使用して、Astroでページ間のシームレスなナビゲーションを実現する。