ClientRouter & transisi halaman

ClientRouter memberi portal beritamu transisi halus antar artikel. Ia juga mengubah asumsi dasar setiap skrip di halamanmu, dan iklan adalah korban pertamanya.

Memasangnya

---
// src/layouts/Dasar.astro
import { ClientRouter } from "astro:transitions";
---
<head>
  …
  <ClientRouter />
</head>

Setelah ini, klik tautan internal tidak lagi memuat ulang dokumen. Astro mengambil halaman tujuan, menukar isi <body>, dan menganimasikan transisinya lewat View Transitions API browser.

Transisi bernama

<!-- Di kartu artikel pada halaman daftar -->
<img src={a.gambar} transition:name={`sampul-${a.id}`} />
<h2 transition:name={`judul-${a.id}`}>{a.judul}</h2>

<!-- Di halaman artikel -->
<img src={artikel.gambar} transition:name={`sampul-${artikel.id}`} />
<h1 transition:name={`judul-${artikel.id}`}>{artikel.judul}</h1>

Nama yang sama di dua halaman membuat browser menganimasikan elemen itu dari posisi lama ke posisi baru. Untuk portal berita, gambar sampul yang membesar mulus dari kartu ke halaman artikel adalah efek yang terasa mahal dan biayanya nol JavaScript tambahan.

Harga yang harus dibayar

1. Skrip tidak dijalankan ulang

<script>
  // Jalan SEKALI, saat pertama kali dokumen dimuat.
  // Setelah navigasi ClientRouter, TIDAK jalan lagi.
  document.querySelectorAll(".tab").forEach(pasangHandler);
</script>

<script>
  // Jalan di tiap halaman, termasuk yang pertama.
  document.addEventListener("astro:page-load", () => {
    document.querySelectorAll(".tab").forEach(pasangHandler);
  });
</script>

2. Skrip pihak ketiga adalah korban utama

<script>
  document.addEventListener("astro:page-load", () => {
    // GA4
    (window as any).gtag?.("event", "page_view", {
      page_path: location.pathname,
      page_title: document.title,
    });

    // Iklan — segarkan slot untuk halaman baru
    (window as any).googletag?.cmd.push(() => {
      (window as any).googletag.pubads().refresh();
    });
  });
</script>

3. Kebocoran memori

// Di island Vue: bersihkan apa pun yang kamu pasang di luar komponen
onUnmounted(() => {
  chart.value?.destroy();
  observer?.disconnect();
  clearInterval(timer);
});

Tanpa ClientRouter, muat ulang halaman membersihkan segalanya secara paksa — jadi listener yang bocor tidak pernah terasa. Dengan ClientRouter, dokumen yang sama hidup terus, dan setiap navigasi menambah satu listener lagi. Setelah dua puluh artikel, ponsel pembaca melambat.

Daftar event

Mempertahankan elemen antar halaman

<!-- Pemutar audio tetap hidup saat pembaca pindah artikel -->
<audio transition:persist id="pemutar" controls></audio>

<!-- Header tidak ikut dianimasikan keluar-masuk -->
<header transition:persist>…</header>

Ini fitur yang tidak bisa ditiru MPA biasa: pemutar audio berita yang terus berjalan saat pembaca menjelajah artikel lain. Kalau portalmu punya konten audio atau video, ini alasan terkuat menyalakan ClientRouter.

Hormati preferensi pembaca

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Sebagian orang mengalami mual atau pusing karena animasi transisi. Astro sudah menghormati preferensi ini untuk animasi bawaannya, tapi transisi kustom yang kamu tulis sendiri tidak otomatis ikut.

Haruskah kamu memakainya?