การเอาชนะข้อจำกัดของ SPA
Single Page Applications (SPA) อย่าง Vue.js มอบความเร็วและประสบการณ์ผู้ใช้งานที่ยอดเยี่ยม การเปลี่ยนผ่านที่ลื่นไหลและการจัดการสถานะ (state management) ที่รวดเร็วช่วยให้การพัฒนาเป็นเรื่องง่าย
คุณจะประสบปัญหาหากธุรกิจของคุณต้องพึ่งพาการเข้าถึงผ่านการค้นหาแบบ organic (organic search traffic) บอทของ Search engine มักจะเห็นเพียงโครง HTML ว่างเปล่าเมื่อเข้ามายัง SPA แม้ว่า Google จะจัดการกับ JavaScript ได้ แต่ก็ทำได้อย่างล่าช้า ส่วน Search engine อื่นๆ อาจประสบปัญหาอย่างมากในการทำดัชนี (index) เนื้อหาของคุณ
เราสร้าง Global Full-Stack Developer (GFD) โดยใช้ Vue 3 เราต้องการ SEO โดยที่ไม่ต้องย้าย codebase ทั้งหมดไปยัง framework แบบ Server-Side Rendering (SSR) อย่าง Nuxt
เราจึงเลือกใช้การทำ prerendering ในช่วง build-time
การทำ Prerendering จะเปลี่ยนเส้นทาง (routes) ที่กำหนดให้กลายเป็นไฟล์ HTML แบบ static ในระหว่างกระบวนการ build เมื่อบอทเข้ามาที่เว็บไซต์ของคุณ มันจะได้รับเอกสาร HTML ที่สมบูรณ์ แทนที่จะเป็นเพียง div ว่างๆ
เราใช้ vite-plugin-prerender สำหรับการตั้งค่า Vite ของเรา
ทำตามขั้นตอนเหล่านี้เพื่อเริ่มใช้งาน:
ติดตั้ง plugin เป็น development dependency:
npm install vite-plugin-prerender -Dกำหนดค่า
vite.config.jsเพื่อระบุ routes ของคุณรันคำสั่ง build ของคุณ
วิธีนี้ช่วยให้คุณได้รับประโยชน์ด้าน SEO โดยไม่ต้องเผชิญกับความซับซ้อนของการทำ SSR แบบเต็มรูปแบบ
ที่มา: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd