SPA की सीमाओं को पार करना
Vue.js जैसे Single Page Applications (SPA) बेहतरीन गति और यूजर एक्सपीरियंस प्रदान करते हैं। सहज ट्रांज़िशन और तेज़ स्टेट मैनेजमेंट डेवलपमेंट को आसान बनाते हैं।
यदि आपका व्यवसाय ऑर्गेनिक सर्च ट्रैफिक पर निर्भर है, तो आपको एक समस्या का सामना करना पड़ सकता है। जब सर्च इंजन बॉट्स किसी SPA पर जाते हैं, तो उन्हें अक्सर एक खाली HTML शेल ही दिखाई देता है। Google जावास्क्रिप्ट को धीरे प्रोसेस करता है। अन्य सर्च इंजन आपके कंटेंट को इंडेक्स करने में संघर्ष करते हैं।
हमने Vue 3 का उपयोग करके Global Full-Stack Developer (GFD) बनाया। हमें पूरे कोडबेस को Nuxt जैसे Server-Side Rendering (SSR) फ्रेमवर्क पर ले जाए बिना SEO की आवश्यकता थी।
हमने build-time prerendering को चुना।
Prerendering आपकी बिल्ड प्रक्रिया के दौरान विशिष्ट रूट्स को स्टैटिक HTML फाइलों में बदल देता है। जब कोई बॉट आपकी साइट पर आता है, तो उसे एक पूरा HTML डॉक्यूमेंट मिलता है। यह एक खाली div के बजाय होता है।
हमने अपने Vite सेटअप के लिए vite-plugin-prerender का उपयोग किया।
इसे लागू करने के लिए इन चरणों का पालन करें:
प्लगइन को डेवलपमेंट डिपेंडेंसी के रूप में इंस्टॉल करें:
npm install vite-plugin-prerender -Dअपने रूट्स को सूचीबद्ध करने के लिए vite.config.js को कॉन्फ़िगर करें।
अपना बिल्ड कमांड चलाएं।
यह तरीका आपको पूर्ण SSR की जटिलता के बिना SEO लाभ प्रदान करता है।
स्रोत: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd