𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻𝘀 𝗳𝗼𝗿 𝗦𝗘𝗢
Vue.js പോലുള്ള Single Page Applications (SPA) വേഗതയേറിയ ഉപഭോക്തൃ അനുഭവം വാഗ്ദാനം ചെയ്യുന്നു.
ഇതിലെ ട്രാൻസിഷനുകൾ (transitions) വളരെ സുഗമമാണ്. സ്റ്റേറ്റ് മാനേജ്മെന്റ് (State management) മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.
എന്നാൽ ഓർഗാനിക് സെർച്ച് ട്രാഫിക്കിനെ (organic search traffic) സംബന്ധിച്ചിടത്തോളം SPA-കൾക്ക് ഒരു വലിയ പ്രശ്നമുണ്ട്.
സെർച്ച് എൻജിൻ ബോട്ടുകൾ പലപ്പോഴും ഒരു ശൂന്യമായ HTML root div മാത്രമേ കാണാറുള്ളൂ. അവർക്ക് അവിടെ ഒന്നും കാണാൻ കഴിയില്ല.
ഗൂഗിൾ ഒടുവിൽ JavaScript വായിച്ചെടുക്കും, പക്ഷേ അതിന് സമയമെടുക്കും. മറ്റ് സെർച്ച് എൻജിനുകൾക്ക് ഇത് കൂടുതൽ ബുദ്ധിമുട്ടാണ്.
ഞങ്ങൾ Vue 3 ഉപയോഗിച്ചാണ് Global Full-Stack Developer (GFD) നിർമ്മിച്ചത്. ഞങ്ങൾക്ക് SEO ആവശ്യമായിരുന്നു. എന്നാൽ എല്ലാം Nuxt പോലുള്ള ഒരു Server-Side Rendered (SSR) ഫ്രെയിംവർക്കിലേക്ക് മാറ്റാൻ ഞങ്ങൾ ആഗ്രഹിച്ചില്ല.
ബിൽഡ്-ടൈം പ്രീ-റെൻഡറിംഗ് (build-time prerendering) ഉപയോഗിച്ച് ഞങ്ങൾ ഇത് പരിഹരിച്ചു.
നിങ്ങളുടെ ബിൽഡ് പ്രക്രിയയ്ക്കിടെ (build process), റൂട്ടുകൾക്കായി (routes) സ്റ്റാറ്റിക് HTML ഫയലുകൾ നിർമ്മിക്കാൻ പ്രീ-റെൻഡറിംഗിലൂടെ സാധിക്കും.
ഒരു ബോട്ട് നിങ്ങളുടെ /about അല്ലെങ്കിൽ /services പേജ് സന്ദർശിക്കുമ്പോൾ, അതിന് ഒരു പൂർണ്ണമായ HTML ഡോക്യുമെന്റ് കാണാൻ കഴിയും. ഒരു ശൂന്യമായ ഷെൽ (empty shell) ആയിട്ടല്ല അത് കാണുന്നത്.
ഞങ്ങളുടെ Vite സെറ്റപ്പിനായി ഞങ്ങൾ vite-plugin-prerender ഉപയോഗിച്ചു.
ഇത് എങ്ങനെ നടപ്പിലാക്കാം എന്ന് താഴെ നൽകുന്നു.
- പ്ലഗിൻ ഒരു ഡെവലപ്മെന്റ് डिपൻഡൻസി (development dependency) ആയി ഇൻസ്റ്റാൾ ചെയ്യുക:
npm install vite-plugin-prerender -D
നിങ്ങളുടെ vite.config.js ഫയലിൽ പ്ലഗിൻ കോൺഫിഗർ ചെയ്യുക.
ഇൻഡക്സിംഗ് (indexing) ആവശ്യമുള്ള നിങ്ങളുടെ പ്രത്യേക റൂട്ടുകൾ ലിസ്റ്റ് ചെയ്യുക.
ഈ രീതി നിങ്ങൾക്ക് ഒരു SPA-യുടെ വേഗതയും സ്റ്റാറ്റിക് സൈറ്റുകളുടെ SEO ഗുണങ്ങളും നൽകുന്നു.
സ്രോതസ്സ്: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd