SPA Sınırlamasını Aşmak
Vue.js gibi Single Page Application (SPA) yapıları harika hız ve kullanıcı deneyimi sunar. Akıcı geçişler ve hızlı durum yönetimi (state management) geliştirmeyi kolaylaştırır.
Eğer işiniz organik arama trafiğine dayanıyorsa bir sorunla karşılaşırsınız. Arama motoru botları bir SPA'yı ziyaret ettiklerinde genellikle boş bir HTML kabuğu görürler. Google, JavaScript'i yavaş işler. Diğer arama motorları ise içeriğinizi dizine eklemekte oldukça zorlanır.
Global Full-Stack Developer (GFD)'yi Vue 3 kullanarak inşa ettik. Tüm kod tabanını Nuxt gibi bir Server-Side Rendering (SSR) çerçevesine taşımadan SEO'ya ihtiyacımız vardı.
Derleme zamanı ön oluşturmayı (build-time prerendering) seçtik.
Prerendering, derleme süreciniz sırasında belirli rotaları statik HTML dosyalarına dönüştürür. Bir bot sitenizi ziyaret ettiğinde, tam bir HTML belgesi alır. Bu, boş bir div yerine gerçekleşir.
Vite kurulumumuz için vite-plugin-prerender kullandık.
Uygulamak için şu adımları izleyin:
Eklentiyi bir geliştirme bağımlılığı (development dependency) olarak yükleyin: npm install vite-plugin-prerender -D
Rotalarınızı listelemek için vite.config.js dosyanızı yapılandırın.
Derleme (build) komutunuzu çalıştırın.
Bu yöntem, tam SSR karmaşıklığına girmeden size SEO avantajları sağlar.
Kaynak: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd