𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝘁𝗵𝗲 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻
Vue.js போன்ற Single Page Applications (SPA) சிறந்த வேகம் மற்றும் பயனர் அனுபவத்தை வழங்குகின்றன. தடையற்ற மாற்றங்கள் (fluid transitions) மற்றும் வேகமான நிலை மேலாண்மை (state management) மேம்பாட்டை எளிதாக்குகின்றன.
உங்கள் வணிகம் organic search traffic-ஐச் சார்ந்து இருந்தால், நீங்கள் ஒரு சிக்கலைச் சந்திக்க நேரிடும். Search engine bots ஒரு SPA-விற்குச் செல்லும்போது, பெரும்பாலும் ஒரு காலியான HTML shell-ஐ மட்டுமே பார்க்கின்றன. Google JavaScript-ஐ மெதுவாகக் கையாளுகிறது. மற்ற search engines உங்கள் உள்ளடக்கத்தை (content) index செய்வதற்கே சிரமப்படுகின்றன.
நாங்கள் Vue 3-ஐப் பயன்படுத்தி Global Full-Stack Developer (GFD)-ஐ உருவாக்கினோம். முழு codebase-ஐயும் Nuxt போன்ற Server-Side Rendering (SSR) framework-க்கு மாற்றாமல், எங்களுக்கு SEO தேவைப்பட்டது.
நாங்கள் build-time prerendering முறையைத் தேர்ந்தெடுத்தோம்.
Prerendering என்பது உங்கள் build process-ன் போது குறிப்பிட்ட routes-களை static HTML கோப்புகளாக மாற்றுகிறது. ஒரு bot உங்கள் தளத்திற்கு வரும்போது, அது ஒரு முழுமையான HTML ஆவணத்தைப் பெறுகிறது. இது ஒரு காலியான div-க்கு பதிலாக நிகழ்கிறது.
எங்கள் Vite setup-க்காக நாங்கள் vite-plugin-prerender-ஐப் பயன்படுத்தினோம்.
இதைச் செயல்படுத்த இந்த வழிமுறைகளைப் பின்பற்றவும்:
பிளகினை (plugin) ஒரு development dependency ஆக நிறுவவும்: npm install vite-plugin-prerender -D
உங்கள் routes-களைப் பட்டியலிட
vite.config.js-ஐ உள்ளமைக்கவும் (Configure).உங்கள் build command-ஐ இயக்கவும்.
இந்த முறை முழுமையான SSR-ன் சிக்கல்கள் இன்றி உங்களுக்கு SEO நன்மைகளை வழங்குகிறது.
ஆதாரம்: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd