ClientRouter

ClientRouterとは

SPAのような遷移を提供する

Layout.astroなどのルート階層の<head>内に配置することが一般的

---
// src/layouts/Layout.astro
import { ClientRouter } from 'astro:transitions';
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Trail</title>
    <!-- Here -->
    <ClientRouter />
  </head>
  <body>
    <slot />
  </body>
</html>

  1. フルリロードの防止

    • SPA“風”である
    • 遷移の前に移動先のHTMLをfetchして差分を更新する
    • JSが無効な時はMPAに切り替わる

  2. 状態・DOMの永続化(transition:persisit)

    • 遷移による状態を保持できる
    • アンマウント・再マウントの防止

  3. アニメーションの追加

  4. ライフサイクルイベントの提供

    • ClientRouterを使用すると従来のDOMContentLoadedなどが発火しなくなるため提供
    • Lifecycle events