SPA-এর সীমাবদ্ধতা কাটিয়ে ওঠা
Vue.js-এর মতো Single Page Applications (SPA) চমৎকার গতি এবং ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। সাবলীল ট্রানজিশন এবং দ্রুত স্টেট ম্যানেজমেন্ট ডেভেলপমেন্টকে সহজ করে তোলে।
আপনার ব্যবসা যদি অর্গানিক সার্চ ট্রাফিকের (organic search traffic) ওপর নির্ভরশীল হয়, তবে আপনি সমস্যার সম্মুখীন হতে পারেন। সার্চ ইঞ্জিন বটগুলো যখন কোনো SPA ভিজিট করে, তখন তারা প্রায়ই একটি খালি HTML শেল (shell) দেখতে পায়। Google জাভাস্ক্রিপ্ট (JavaScript) ধীরগতিতে প্রসেস করে। অন্যান্য সার্চ ইঞ্জিনগুলোর জন্য আপনার কন্টেন্ট ইনডেক্স করা বেশ কঠিন হয়ে পড়ে।
আমরা Vue 3 ব্যবহার করে Global Full-Stack Developer (GFD) তৈরি করেছি। আমাদের পুরো কোডবেসকে Nuxt-এর মতো কোনো Server-Side Rendering (SSR) ফ্রেমওয়ার্কে স্থানান্তর না করেই SEO প্রয়োজন ছিল।
আমরা build-time prerendering বেছে নিয়েছি।
Prerendering আপনার বিল্ড প্রসেসের সময় নির্দিষ্ট রুটগুলোকে (routes) স্ট্যাটিক HTML ফাইলে রূপান্তরিত করে। যখন কোনো বট আপনার সাইট ভিজিট করে, তখন এটি একটি পূর্ণাঙ্গ HTML ডকুমেন্ট পায়। একটি খালি div-এর পরিবর্তে এটি কাজ করে।
আমরা আমাদের Vite সেটআপের জন্য vite-plugin-prerender ব্যবহার করেছি।
এটি ইমপ্লিমেন্ট করতে নিচের ধাপগুলো অনুসরণ করুন:
প্লাগইনটি একটি development dependency হিসেবে ইনস্টল করুন:
npm install vite-plugin-prerender -Dআপনার রুটগুলো তালিকাভুক্ত করতে
vite.config.jsকনফিগার করুন।আপনার build কমান্ডটি রান করুন।
এই পদ্ধতিটি পূর্ণাঙ্গ SSR-এর জটিলতা ছাড়াই আপনাকে SEO সুবিধা প্রদান করে।
উৎস: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd