𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻𝘀 𝗳𝗼𝗿 𝗦𝗘𝗢
Vue.js ನಂತಹ Single Page Applications (SPA) ವೇಗವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತವೆ.
ಟ್ರಾನ್ಸಿಷನ್ಗಳು ಸುಗಮವಾಗಿರುತ್ತವೆ. ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ಆದರೆ, ಆರ್ಗ್ಯಾನಿಕ್ ಸರ್ಚ್ ಟ್ರಾಫಿಕ್ (organic search traffic) ವಿಷಯದಲ್ಲಿ SPA ಗಳು ಒಂದು ದೊಡ್ಡ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸುತ್ತವೆ.
ಸರ್ಚ್ ಇಂಜಿನ್ ಬಾಟ್ಗಳು (Search engine bots) ಹೆಚ್ಚಾಗಿ ಖಾಲಿ HTML root div ಅನ್ನು ಮಾತ್ರ ನೋಡುತ್ತವೆ. ಅವುಗಳಿಗೆ ಅಲ್ಲಿ ಏನೂ ಕಾಣಿಸುವುದಿಲ್ಲ.
Google ಅಂತಿಮವಾಗಿ JavaScript ಅನ್ನು ಓದುತ್ತದೆ. ಆದರೆ ಅದಕ್ಕೆ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇತರ ಸರ್ಚ್ ಇಂಜಿನ್ಗಳು ಇದರಲ್ಲಿ ಹೆಚ್ಚು ಕಷ್ಟಪಡುತ್ತವೆ.
ನಾವು Vue 3 ಬಳಸಿ Global Full-Stack Developer (GFD) ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ. ನಮಗೆ SEO ಅಗತ್ಯವಿತ್ತು. ಆದರೆ ನಾವು ಎಲ್ಲವನ್ನೂ Nuxt ನಂತಹ Server-Side Rendered (SSR) ಫ್ರೇಮ್ವರ್ಕ್ಗೆ ಬದಲಾಯಿಸಲು ಬಯಸಲಿಲ್ಲ.
ನಾವು ಇದನ್ನು build-time prerendering ಮೂಲಕ ಪರಿಹರಿಸಿದೆವು.
Prerendering ನಿಮ್ಮ build ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ routes ಗಾಗಿ ಸ್ಟ್ಯಾಟಿಕ್ HTML ಫೈಲ್ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
ಒಂದು ಬಾಟ್ ನಿಮ್ಮ /about ಅಥವಾ /services ಪುಟಕ್ಕೆ ಭೇಟಿ ನೀಡಿದಾಗ, ಅದು ಪೂರ್ಣ ಪ್ರಮಾಣದ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ನೋಡುತ್ತದೆ. ಅದು ಖಾಲಿ ಶೆಲ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ.
ನಾವು ನಮ್ಮ Vite ಸೆಟಪ್ಗಾಗಿ vite-plugin-prerender ಅನ್ನು ಬಳಸಿದೆವು.
ಇದನ್ನು ನೀವು ಹೇಗೆ ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.
- ಪ್ಲಗಿನ್ ಅನ್ನು development dependency ಆಗಿ ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ:
npm install vite-plugin-prerender -D
ನಿಮ್ಮ vite.config.js ಫೈಲ್ನಲ್ಲಿ ಪ್ಲಗಿನ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.
ಇಂಡೆಕ್ಸಿಂಗ್ ಅಗತ್ಯವಿರುವ ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ routes ಅನ್ನು ಪಟ್ಟಿ ಮಾಡಿ.
ಈ ವಿಧಾನವು ನಿಮಗೆ SPA ನ ವೇಗ ಮತ್ತು ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ಗಳ SEO ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಮೂಲ: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd