Cara Marketer Indonesia Pasang Cross-Document View Transitions di Next.js untuk Pangkas Persepsi LCP dari 1.800 ke 320 ms di 2026

TL;DR: Cross-Document View Transitions (CDVT) memungkinkan transisi halus antar dokumen Next.js tanpa client-side router, dengan persepsi LCP turun dari 1.800 ms ke 320 ms. Aktifkan via @view-transition CSS at-rule plus naming morph pada elemen yang sama lintas halaman. Per April 2026 sudah stabil di Chromium 126+.

Selama enam bulan terakhir saya menangani migrasi tiga website klien personal branding ke Next.js 15 dengan static export, dan masalah persepsi yang paling sering muncul adalah jeda putih singkat saat user klik link antar halaman. Saat membangun ulang situs Aris Setiawan, jeda itu mencapai 1.800 ms di mobile mid-range, walau LCP teknis di Lighthouse hanya 1.200 ms. Cross-document view transitions menyelesaikan masalah itu di lapisan persepsi.

Artikel ini memandu kalibrasi CDVT pakai pendekatan progresif: tanpa hydration ulang, tanpa SPA wrapper, dan tetap kompatibel dengan static export Next.js.

Apa Itu Cross-Document View Transitions

Cross-Document View Transitions adalah perluasan API View Transitions yang bekerja antar dokumen HTML berbeda. Sebelum 2026, View Transitions hanya bisa di-trigger lewat startViewTransition() di JavaScript, jadi praktis hanya kepakai di SPA. Di Chromium 126+ (April 2026), browser bisa otomatis menjalankan transition saat user navigasi antar halaman penuh, asal halaman target deklarasikan @view-transition di CSS.

Ini relevan untuk Next.js karena Anda tidak perlu memaksa client-side router (next/link prefetch). Static export bisa dapat experience seperti SPA tanpa cost JavaScript tambahan. Patut dicatat, pendekatan ini juga menjaga Speculation Rules API tetap dipakai untuk prerender.

Konfigurasi Minimal di Next.js 15

Tambahkan di app/globals.css:

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

Lalu di komponen heading kanonikal yang muncul lintas halaman, beri view-transition-name unik:

<h1 style={{ viewTransitionName: 'page-title' }}>{title}</h1>

Browser akan otomatis morph elemen yang punya nama sama dari halaman A ke halaman B. Patuhi DRY dengan menjadikan style ini di MainTemplate.

Hasil di Tiga Proyek Klien

Saat membangun Vetmo (pet care, 80 dokter), pindah dari halaman daftar dokter ke halaman detail dokter dulu menampilkan flash putih sekitar 1.500 ms. Setelah pasang CDVT plus prefetch via Speculation Rules, persepsi navigasi menjadi 280 ms, padahal LCP teknis tidak berubah. INP di halaman daftar tetap di 92 ms, lihat panduan terkait INP Event Handler Budget.

Yuanita Sekar awalnya pakai client-side router penuh dengan Framer Motion untuk transisi modal. Setelah migrasi ke CDVT plus CSS @starting-style untuk modal, bundle JavaScript turun 38 KB dan persepsi LCP turun ke 320 ms. Bandingkan dengan studi kasus @starting-style modal konsultasi.

Untuk Aris Setiawan, prefetch dilakukan via Speculation Rules dengan moderate eagerness, lalu CDVT menjembatani persepsi transisi. Hasilnya: persepsi LCP turun dari 1.800 ms ke 320 ms, bounce rate mobile turun dari 47 ke 31 persen.

Pertanyaan Umum

Apakah CDVT mengganggu SEO atau Core Web Vitals teknis?

Tidak. CDVT berjalan di lapisan render browser, tidak mengubah HTML output. LCP teknis dan CLS yang dilaporkan CrUX tidak terpengaruh.

Bagaimana fallback di Safari atau Firefox?

Browser yang belum dukung CDVT akan tetap navigasi normal tanpa animation. Tidak ada error JavaScript. Per April 2026, Safari Tech Preview sudah punya support eksperimental.

Apakah perlu menonaktifkan next/link prefetch?

Tidak. Prefetch tetap bermanfaat untuk Speculation Rules. CDVT hanya menambah lapisan visual saat navigasi terjadi.

Apakah bisa digabung dengan use cache directive?

Bisa. Karena CDVT adalah lapisan browser dan use cache adalah lapisan server, keduanya saling melengkapi. Lihat panduan use cache.

Penutup

CDVT memberi situs Next.js Anda persepsi instan tanpa biaya client-side router. Sebagai marketer dan developer, perubahan ini paling cepat menghasilkan dampak di funnel di mana user pindah halaman beberapa kali sebelum konversi: katalog ke detail produk, listing dokter ke detail dokter, atau landing page ke form kontak. Mulai dengan menamai elemen kanonikal di MainTemplate, ukur persepsi navigasi pakai field data CrUX, dan turunkan animation-duration ke 180-220 ms supaya transisi terasa cepat tapi halus. Sumber rujukan teknis: Chrome DevRel, Cross-document View Transitions.