Mengatasi Batasan SPA

Single Page Applications (SPA) seperti Vue.js menawarkan kecepatan dan pengalaman pengguna yang luar biasa. Transisi yang mulus dan manajemen state yang cepat membuat pengembangan menjadi mudah.

Anda akan menghadapi masalah jika bisnis Anda bergantung pada trafik pencarian organik. Bot mesin pencari sering kali hanya melihat kerangka HTML kosong saat mengunjungi SPA. Google memproses JavaScript dengan lambat. Mesin pencari lainnya bahkan kesulitan untuk mengindeks konten Anda sama sekali.

Kami membangun Global Full-Stack Developer (GFD) menggunakan Vue 3. Kami membutuhkan SEO tanpa harus memindahkan seluruh basis kode ke framework Server-Side Rendering (SSR) seperti Nuxt.

Kami memilih build-time prerendering.

Prerendering mengubah rute tertentu menjadi file HTML statis selama proses build Anda. Saat bot mengunjungi situs Anda, bot tersebut menerima dokumen HTML yang lengkap. Hal ini terjadi alih-alih hanya menerima div kosong.

Kami menggunakan vite-plugin-prerender untuk pengaturan Vite kami.

Ikuti langkah-langkah berikut untuk menerapkannya:

  1. Instal plugin sebagai dependensi pengembangan: npm install vite-plugin-prerender -D

  2. Konfigurasikan vite.config.js Anda untuk mencantumkan rute-rute Anda.

  3. Jalankan perintah build Anda.

Metode ini memberikan manfaat SEO tanpa kerumitan SSR penuh.

Sumber: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd