𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝘁𝗵𝗲 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻 -> 𝗦𝗣𝗔 کی محدودیت پر قابو پانا

Vue.js جیسی Single Page Applications (SPA) بہترین رفتار اور صارف کا تجربہ (user experience) فراہم کرتی ہیں۔ ہموار ٹرانزیشنز اور تیز رفتار اسٹیٹ مینجمنٹ (state management) ڈویلپمنٹ کو آسان بنا دیتی ہیں۔

اگر آپ کا کاروبار آرگینک سرچ ٹریفک (organic search traffic) پر منحصر ہے، تو آپ کو ایک مسئلے کا سامنا کرنا پڑ سکتا ہے۔ جب سرچ انجن بوٹس (bots) کسی SPA کا دورہ کرتے ہیں، تو انہیں اکثر ایک خالی HTML شیل نظر آتا ہے۔ گوگل JavaScript کو سست رفتاری سے ہینڈل کرتا ہے۔ دیگر سرچ انجن آپ کے مواد کو انڈیکس کرنے میں بالکل ناکام رہتے ہیں۔

ہم نے Vue 3 کا استعمال کرتے ہوئے Global Full-Stack Developer (GFD) بنایا۔ ہمیں SEO کی ضرورت تھی لیکن ہم پورے کوڈ بیس (codebase) کو Nuxt جیسے Server-Side Rendering (SSR) فریم ورک پر منتقل نہیں کرنا چاہتے تھے۔

ہم نے build-time prerendering کا انتخاب کیا۔

Prerendering آپ کے بلڈ پروسیس (build process) کے دوران مخصوص روٹس (routes) کو اسٹیٹک HTML فائلوں میں تبدیل کر دیتا ہے۔ جب کوئی بوٹ آپ کی سائٹ کا دورہ کرتا ہے، تو اسے ایک مکمل HTML دستاویز ملتی ہے۔ یہ ایک خالی div کے بجائے ہوتا ہے۔

ہم نے اپنے Vite سیٹ اپ کے لیے vite-plugin-prerender کا استعمال کیا۔

اسے نافذ کرنے کے لیے ان مراحل پر عمل کریں:

  1. پلگ ان کو ڈویلپمنٹ ڈیپینڈنسی (development dependency) کے طور پر انسٹال کریں: npm install vite-plugin-prerender -D

  2. اپنے روٹس کی فہرست بنانے کے لیے اپنی vite.config.js کو کنفیگر کریں۔

  3. اپنی بلڈ کمانڈ چلائیں۔

یہ طریقہ مکمل SSR کی پیچیدگیوں کے بغیر آپ کو SEO کے فوائد فراہم کرتا ہے۔

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