View Transitions API: Cara Website Bisnis Indonesia Terasa Seperti Aplikasi Native Tanpa Framework SPA Berat

TL;DR: View Transitions API adalah fitur browser modern yang menjalankan animasi otomatis ketika DOM atau halaman berubah, sehingga website biasa terasa seperti aplikasi native tanpa framework SPA berat. Sejak 2024 didukung Chrome dan Edge, lalu Safari di 2025, API ini layak diadopsi tim produk Indonesia yang ingin meningkatkan persepsi kualitas tanpa memboroskan JavaScript di perangkat menengah.

Dalam beberapa proyek terakhir, saya melihat pola yang sama berulang: tim memilih framework SPA berat hanya karena ingin transisi halaman terasa mulus. Hasilnya, bundle JavaScript membengkak dan INP memburuk pada perangkat mid-range, justru di segmen pengguna terbesar.

Sejak Chrome 111 (Maret 2023) memperkenalkan View Transitions API untuk same-document, lalu Chrome 126 menambah cross-document, dan Safari 18 menyusul di 2025, kebutuhan untuk memilih SPA hanya demi transisi sebenarnya sudah usang. Saat membangun beberapa landing page klien yang berbasis multi-page, kami mendapatkan efek transisi yang setara dengan SPA, tanpa biaya runtime tambahan.

Masalah yang Diselesaikan View Transitions API

Pengguna di kota tier 2 dan tier 3 di Indonesia umumnya memakai perangkat dengan RAM 3-6 GB. Mengirim 200-400 KB JavaScript hanya untuk client-side routing menjadi pemborosan. Pada saat yang sama, pengguna sudah terbiasa dengan transisi mulus di aplikasi native dan media sosial. Tanpa transisi, website terasa kuno meski performanya kencang. Untuk konteks lebih dalam tentang dampak performa, lihat juga Core Web Vitals.

View Transitions API menyelesaikan dilema ini. Browser mengambil snapshot tampilan lama, mengeksekusi navigasi atau perubahan DOM, lalu menjalankan animasi crossfade default antara dua snapshot. Tidak ada library tambahan, tidak ada runtime SPA.

Dua Mode Pemakaian

Same-document cocok untuk e-commerce dengan filter produk dinamis. Cross-document cocok untuk blog, portofolio, dan website bisnis yang ingin mempertahankan struktur multi-page agar SEO lebih sederhana, sekaligus mendapat efek SPA. Untuk Next.js App Router, dukungan cross-document tinggal aktif lewat CSS modern dan navigasi standar.

Studi Kasus dari Praktik

Saat mengerjakan ulang halaman produk Vetmo, tim sempat mempertimbangkan migrasi ke pendekatan SPA penuh untuk transisi antar kategori. Setelah uji coba, kombinasi multi-page dengan cross-document View Transitions memberi hasil visual yang setara, dengan bundle JavaScript jauh lebih kecil. Pengukuran lapangan menunjukkan LCP tetap di bawah 2,5 detik untuk 75% pengguna mobile, sementara persepsi merek meningkat di feedback pengguna.

Untuk Yuanita Sekar dan Aris Setiawan yang website-nya berbasis personal branding multi-page, pendekatan ini cocok karena tidak menambah kompleksitas tooling. Praktik ini sejalan dengan rekomendasi web.dev tentang cross-document transitions, di mana progressive enhancement jadi prinsip utama.

Cara Menerapkan dalam 1 Hari

Pertama, audit halaman dengan transisi paling sering dipakai pengguna, biasanya navigasi kategori atau detail produk. Kedua, tambahkan @view-transition { navigation: auto; } di CSS global untuk cross-document. Ketiga, beri view-transition-name pada elemen kunci seperti gambar hero dan judul agar transisinya morph, bukan crossfade biasa. Keempat, uji di Chrome dan Safari, lalu pasang fallback @supports not (view-transition-name: a) untuk browser tua.

Yang TIDAK perlu dilakukan: menambah library animasi besar, mengubah arsitektur jadi SPA, atau menulis JavaScript routing manual. Sederhana, hemat, dan sesuai prinsip Progressive Enhancement.

Pertanyaan Umum

Apakah View Transitions API sudah aman dipakai di production?

Ya, dengan progressive enhancement. Per April 2026, dukungan global di atas 85% berdasarkan caniuse. Browser tua akan abaikan API dan navigasi tetap berjalan normal, sehingga tidak ada risiko regresi.

Apakah ini menggantikan Next.js View Transitions atau Framer Motion?

Tidak menggantikan, melainkan melengkapi. Framer Motion tetap unggul untuk animasi per-komponen kompleks. View Transitions API ideal untuk transisi tampilan besar dan navigasi antar halaman.

Apakah View Transitions berdampak ke SEO?

Tidak negatif. Karena halaman tetap multi-page (HTML penuh per URL), crawler Google tetap mengindeks normal. Bahkan, performa yang lebih baik berdampak positif ke ranking faktor Core Web Vitals.

Berapa lama belajar untuk tim yang baru pertama pakai?

Untuk same-document transitions, kurva belajarnya 1-2 hari. Untuk cross-document dengan custom morph animation, perlu 3-5 hari termasuk debugging lintas browser.

Kapan Memutuskan Tidak Pakai

Untuk aplikasi yang memang butuh state global kompleks (dashboard real-time, editor kolaboratif), SPA tetap pilihan tepat. View Transitions API adalah solusi untuk segmen besar website bisnis, portofolio, dan e-commerce yang sebelumnya terjebak memilih SPA hanya demi transisi visual. Adopsi yang tepat memberi efek native dengan budget development dan performa yang lebih sehat.