SPA ಮಿತಿಗಳನ್ನು ಮೀರಿ ನಿಲ್ಲುವುದು
Vue.js ನಂತಹ Single Page Applications (SPA)ಗಳು ಅತ್ಯುತ್ತಮ ವೇಗ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡುತ್ತವೆ. ಸುಗಮ ಸಂಕ್ರಮಣಗಳು (fluid transitions) ಮತ್ತು ವೇಗದ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ನಿಮ್ಮ ವ್ಯವಹಾರವು ಆರ್ಗ್ಯಾನಿಕ್ ಸರ್ಚ್ ಟ್ರಾಫಿಕ್ (organic search traffic) ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದರೆ ನೀವು ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸುತ್ತೀರಿ. ಸರ್ಚ್ ಇಂಜಿನ್ ಬಾಟ್ಗಳು (Search engine bots) SPA ಅನ್ನು ಭೇಟಿ ಮಾಡಿದಾಗ ಹೆಚ್ಚಾಗಿ ಖಾಲಿ HTML ಶೆಲ್ ಅನ್ನು ಮಾತ್ರ ನೋಡುತ್ತವೆ. Google ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ನಿಧಾನವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ಇತರ ಸರ್ಚ್ ಇಂಜಿನ್ಗಳು ನಿಮ್ಮ ಕಂಟೆಂಟ್ ಅನ್ನು ಇಂಡೆಕ್ಸ್ ಮಾಡಲು ಕಷ್ಟಪಡುತ್ತವೆ.
ನಾವು 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