Pokonywanie ograniczeń SPA
Aplikacje typu Single Page Application (SPA), takie jak Vue.js, oferują świetną szybkość i doskonałe doświadczenia użytkownika. Płynne przejścia i szybkie zarządzanie stanem ułatwiają proces tworzenia.
Pojawia się problem, jeśli Twój biznes opiera się na ruchu z wyszukiwarek organicznych. Boty wyszukiwarek często widzą pustą powłokę HTML, gdy odwiedzają aplikację SPA. Google przetwarza JavaScript powoli, a inne wyszukiwarki mają ogromne trudności z zaindeksowaniem Twojej treści.
Zbudowaliśmy Global Full-Stack Developer (GFD) przy użyciu Vue 3. Potrzebowaliśmy SEO bez konieczności przenoszenia całego kodu do frameworka typu Server-Side Rendering (SSR), takiego jak Nuxt.
Wybraliśmy prerendering w czasie budowania (build-time prerendering).
Prerendering zamienia określone trasy w statyczne pliki HTML podczas procesu budowania. Gdy bot odwiedza Twoją stronę, otrzymuje pełny dokument HTML zamiast pustego elementu div.
W naszej konfiguracji Vite użyliśmy vite-plugin-prerender.
Wykonaj poniższe kroki, aby to wdrożyć:
Zainstaluj wtyczkę jako zależność deweloperską:
npm install vite-plugin-prerender -DSkonfiguruj plik
vite.config.js, aby wymienić swoje trasy.Uruchom komendę budowania.
Ta metoda zapewnia korzyści SEO bez złożoności związanej z pełnym SSR.
Źródło: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd