SPA મર્યાદાઓને દૂર કરવી

Vue.js જેવી Single Page Applications (SPA) ઉત્તમ ઝડપ અને યુઝર એક્સપિરિયન્સ (user experience) આપે છે. સરળ ટ્રાન્ઝિશન અને ઝડપી સ્ટેટ મેનેજમેન્ટ ડેવલપમેન્ટને સરળ બનાવે છે.

જો તમારો વ્યવસાય ઓર્ગેનિક સર્ચ ટ્રાફિક પર આધારિત હોય, તો તમને સમસ્યાનો સામનો કરવો પડી શકે છે. જ્યારે સર્ચ એન્જિન બોટ્સ SPA ની મુલાકાત લે છે, ત્યારે તેઓ ઘણીવાર ખાલી HTML શેલ (shell) જુએ છે. Google JavaScript ને ધીમેથી હેન્ડલ કરે છે. અન્ય સર્ચ એન્જિન તમારા કન્ટેન્ટને ઇન્ડેક્સ કરવામાં જ મુશ્કેલી અનુભવે છે.

અમે Vue 3 નો ઉપયોગ કરીને Global Full-Stack Developer (GFD) બનાવ્યું છે. અમારે આખા કોડબેઝને Nuxt જેવા Server-Side Rendering (SSR) ફ્રેમવર્ક પર ખસેડ્યા વિના SEO ની જરૂર હતી.

અમે build-time prerendering પસંદ કર્યું.

Prerendering તમારી બિલ્ડ પ્રક્રિયા દરમિયાન ચોક્કસ રૂટ્સને સ્ટેટિક HTML ફાઇલોમાં ફેરવે છે. જ્યારે કોઈ બોટ તમારી સાઇટની મુલાકાત લે છે, ત્યારે તેને સંપૂર્ણ HTML ડોક્યુમેન્ટ મળે છે. આ ખાલી div ને બદલે થાય છે.

અમે અમારા Vite સેટઅપ માટે vite-plugin-prerender નો ઉપયોગ કર્યો.

તેને અમલમાં મૂકવા માટે આ સ્ટેપ્સ અનુસરો:

  1. પ્લગઇનને ડેવલપમેન્ટ ડિપેન્ડન્સી તરીકે ઇન્સ્ટોલ કરો: npm install vite-plugin-prerender -D

  2. તમારા રૂટ્સની યાદી બનાવવા માટે તમારી vite.config.js કોન્ફિગર કરો.

  3. તમારી build કમાન્ડ રન કરો.

આ પદ્ધતિ તમને સંપૂર્ણ SSR ની જટિલતા વિના SEO ના ફાયદા આપે છે.

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