SPA പരിമിതികളെ മറികടക്കാം

Vue.js പോലുള്ള Single Page Applications (SPA) മികച്ച വേഗതയും യൂസർ എക്സ്പീരിയൻസും (user experience) നൽകുന്നു. സുഗമമായ ട്രാൻസിഷനുകളും (transitions) വേഗതയേറിയ സ്റ്റേറ്റ് മാനേജ്‌മെന്റും ഡെവലപ്‌മെന്റ് എളുപ്പമാക്കുന്നു.

നിങ്ങളുടെ ബിസിനസ്സ് ഓർഗാനിക് സെർച്ച് ട്രാഫിക്കിനെ (organic search traffic) ആശ്രയിച്ചാണെങ്കിൽ നിങ്ങൾ ഒരു പ്രശ്നം നേരിടേണ്ടി വരും. സെർച്ച് എഞ്ചിൻ ബോട്ടുകൾ ഒരു SPA സന്ദർശിക്കുമ്പോൾ പലപ്പോഴും ഒരു ശൂന്യമായ HTML ഷെൽ (empty HTML shell) മാത്രമാണ് കാണുന്നത്. ഗൂഗിൾ ജാവാസ്ക്രിപ്റ്റ് (JavaScript) സാവധാനത്തിലാണ് കൈകാര്യം ചെയ്യുന്നത്. മറ്റ് സെർച്ച് എഞ്ചിനുകൾക്ക് നിങ്ങളുടെ ഉള്ളടക്കം ഇൻഡക്സ് (index) ചെയ്യാൻ പോലും പ്രയാസമാണ്.

ഞങ്ങൾ Vue 3 ഉപയോഗിച്ചാണ് Global Full-Stack Developer (GFD) നിർമ്മിച്ചത്. മുഴുവൻ കോഡ്‌ബേസും (codebase) Nuxt പോലുള്ള ഒരു Server-Side Rendering (SSR) ഫ്രെയിംവർക്കിലേക്ക് മാറ്റാതെ തന്നെ ഞങ്ങൾക്ക് SEO ആവശ്യമായിരുന്നു.

ഞങ്ങൾ build-time prerendering ആണ് തിരഞ്ഞെടുത്തത്.

നിങ്ങളുടെ ബിൽഡ് പ്രോസസ്സിനിടെ (build process) പ്രത്യേക റൂട്ടുകളെ (routes) സ്റ്റാറ്റിക് HTML ഫയലുകളാക്കി മാറ്റുകയാണ് prerendering ചെയ്യുന്നത്. ഒരു ബോട്ട് നിങ്ങളുടെ സൈറ്റ് സന്ദർശിക്കുമ്പോൾ, അതിന് ഒരു പൂർണ്ണമായ HTML ഡോക്യുമെന്റ് ലഭിക്കുന്നു. ഒരു ശൂന്യമായ div-ന് പകരം ഇത് സംഭവിക്കുന്നു.

ഞങ്ങളുടെ Vite സെറ്റപ്പിനായി ഞങ്ങൾ vite-plugin-prerender ഉപയോഗിച്ചു.

ഇത് നടപ്പിലാക്കാൻ ഈ ഘട്ടങ്ങൾ പിന്തുടരുക:

  1. പ്ലഗിൻ ഒരു ഡെവലപ്‌മെന്റ് डिपൻഡൻസിയായി (development dependency) ഇൻസ്റ്റാൾ ചെയ്യുക: npm install vite-plugin-prerender -D

  2. നിങ്ങളുടെ റൂട്ടുകൾ ലിസ്റ്റ് ചെയ്യുന്നതിനായി vite.config.js കോൺഫിഗർ ചെയ്യുക.

  3. നിങ്ങളുടെ ബിൽഡ് കമാൻഡ് റൺ ചെയ്യുക.

പൂർണ്ണമായ SSR-ന്റെ സങ്കീർണ്ണതകളില്ലാതെ തന്നെ ഈ രീതി നിങ്ങൾക്ക് SEO ഗുണങ്ങൾ നൽകുന്നു.

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