𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝘁𝗵𝗲 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻 (SPA मर्यादांवर मात करणे)

Vue.js सारख्या Single Page Applications (SPA) उत्तम वेग आणि वापरकर्त्याचा अनुभव (user experience) देतात. सुलभ ट्रान्झिशन्स आणि जलद स्टेट मॅनेजमेंटमुळे डेव्हलपमेंट सोपे होते.

जर तुमचा व्यवसाय ऑरगॅनिक सर्च ट्रॅफिकवर (organic search traffic) अवलंबून असेल, तर तुम्हाला समस्या येऊ शकते. जेव्हा सर्च इंजिन बॉट्स (search engine bots) SPA ला भेट देतात, तेव्हा त्यांना अनेकदा फक्त एक रिकामी HTML शेल दिसते. Google JavaScript हाताळण्यास वेळ घेते. इतर सर्च इंजिन्सना तुमचे कंटेंट इंडेक्स (index) करण्यातही अडचणी येतात.

आम्ही Vue 3 वापरून Global Full-Stack Developer (GFD) तयार केले. संपूर्ण कोडबेस Nuxt सारख्या Server-Side Rendering (SSR) फ्रेमवर्कमध्ये न हलवता आम्हाला SEO ची गरज होती.

आम्ही build-time prerendering निवडले.

Prerendering तुमच्या build प्रक्रियेदरम्यान विशिष्ट रूट्सना (routes) स्टॅटिक HTML फाइल्समध्ये रूपांतरित करते. जेव्हा एखादा बॉट तुमच्या साइटला भेट देतो, तेव्हा त्याला पूर्ण HTML डॉक्युमेंट मिळते. हे एका रिकाम्या div ऐवजी घडते.

आम्ही आमच्या Vite सेटअपसाठी vite-plugin-prerender वापरले.

हे लागू करण्यासाठी या पायऱ्या फॉलो करा:

  1. प्लगइन डेव्हलपमेंट डिपेंडन्सी (development dependency) म्हणून इन्स्टॉल करा: npm install vite-plugin-prerender -D

  2. तुमचे रूट्स सूचीबद्ध करण्यासाठी तुमच्या vite.config.js मध्ये कॉन्फिगर करा.

  3. तुमची build कमांड रन करा.

ही पद्धत पूर्ण SSR च्या गुंतागुंतीशिवाय तुम्हाला SEO चे फायदे देते.

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