Blazor adalah framework modern dari Microsoft yang memungkinkan pengembangan aplikasi web interaktif menggunakan bahasa C#, menggantikan kebutuhan utama JavaScript. Dalam Blazor, terdapat beberapa mode eksekusi aplikasi: Blazor Server, Blazor WebAssembly (WASM), dan yang lebih baru, Auto (Server dan WebAssembly). Pemilihan mode ini tidak hanya memengaruhi performa dan interaktivitas aplikasi, tetapi juga berdampak signifikan terhadap optimisasi mesin pencari atau SEO.
Memahami Mode “Auto” dalam Blazor
Mode Auto (Server dan WebAssembly) diperkenalkan untuk menggabungkan keunggulan Blazor Server dan Blazor WebAssembly. Secara teknis, alur eksekusinya adalah sebagai berikut:
- Pre-rendering halaman pertama di server – Server menghasilkan HTML statis lengkap saat pertama kali halaman diakses, sehingga pengguna dan mesin pencari langsung menerima konten.
- Hydration di sisi klien – Setelah HTML diterima browser, Blazor WebAssembly dijalankan untuk menghubungkan interaktivitas ke halaman. Proses ini disebut hydration.
- Navigasi subsequent bersifat SPA – Interaksi selanjutnya berjalan sepenuhnya di sisi klien. Aplikasi berperilaku seperti SPA, konten dimuat melalui JavaScript/WASM.
Implikasi terhadap SEO
- Halaman pertama dapat diindeks dengan baik: Konten awal dapat langsung dibaca mesin pencari berkat pre-rendering di server.
- Konten dinamis setelah hydration: Konten yang dimuat asinkron di klien tidak selalu tersedia untuk mesin pencari tanpa JavaScript/WASM.
- Tag meta dan title: Tidak otomatis diperbarui saat navigasi SPA. Pengembang perlu library tambahan seperti Toolbelt.Blazor.HeadElement untuk SEO optimal.
Kelebihan dan Keterbatasan Mode Auto
- Konten terlihat lebih cepat berkat pre-rendering di server.
- Halaman pertama dapat diindeks dengan baik oleh mesin pencari.
- Aplikasi tetap interaktif seperti SPA setelah hydration.
- Keterbatasan: SEO halaman internal bergantung pada kemampuan mesin pencari mengeksekusi JavaScript/WASM.
- Tidak semua rute otomatis di-render di server. Pre-rendering tambahan mungkin diperlukan.
Praktik Terbaik SEO untuk Blazor Auto
- Pre-render halaman penting untuk memastikan konten dapat diindeks.
- Gunakan library atau JavaScript interop untuk memperbarui tag meta dan title saat navigasi SPA.
- Pastikan semua link internal dapat diakses tanpa JavaScript kritis.
- Optimalkan kecepatan halaman dan Core Web Vitals.
- Gunakan struktur URL yang bersih dan deskriptif untuk semua halaman.