التغلب على قيود تطبيقات الصفحة الواحدة (SPA)
توفر تطبيقات الصفحة الواحدة (SPA) مثل Vue.js سرعة وتجربة مستخدم رائعة. كما أن الانتقالات السلسة والإدارة السريعة للحالة (state management) تجعل عملية التطوير سهلة.
ستواجه مشكلة إذا كان عملك يعتمد على حركة المرور من نتائج البحث المجانية (organic search traffic). فغالبًا ما ترى روبوتات محركات البحث هيكل HTML فارغًا عند زيارة تطبيق SPA. تتعامل Google مع JavaScript ببطء، بينما تواجه محركات البحث الأخرى صعوبة في أرشفة محتواك على الإطلاق.
لقد قمنا ببناء Global Full-Stack Developer (GFD) باستخدام Vue 3. كنا بحاجة إلى تحسين محركات البحث (SEO) دون نقل كامل الكود المصدري إلى إطار عمل يعتمد على العرض من جانب الخادم (SSR) مثل Nuxt.
لقد اخترنا التحضير المسبق أثناء البناء (build-time prerendering).
يقوم التحضير المسبق (Prerendering) بتحويل مسارات (routes) محددة إلى ملفات HTML ثابتة أثناء عملية البناء. عندما يزور الروبوت موقعك، فإنه يتلقى مستند HTML كاملاً، بدلاً من مجرد عنصر div فارغ.
استخدمنا vite-plugin-prerender لإعداد Vite الخاص بنا.
اتبع هذه الخطوات لتنفيذ ذلك:
قم بتثبيت الإضافة كاعتمادية تطوير (development dependency):
npm install vite-plugin-prerender -Dقم بتكوين ملف
vite.config.jsالخاص بك لسرد المسارات (routes).قم بتشغيل أمر البناء (build command).
تمنحك هذه الطريقة فوائد تحسين محركات البحث (SEO) دون تعقيدات الـ SSR الكامل.
المصدر: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd