Подолання обмежень SPA
Односторінкові додатки (SPA), такі як Vue.js, забезпечують чудову швидкість та зручність для користувача. Плавні переходи та швидке керування станом полегшують розробку.
Ви стикаєтеся з проблемою, якщо ваш бізнес залежить від органічного пошукового трафіку. Пошукові боти часто бачать порожню HTML-оболонку, коли відвідують SPA. Google обробляє JavaScript повільно. Іншим пошуковим системам взагалі важко індексувати ваш контент.
Ми розробили Global Full-Stack Developer (GFD) на базі Vue 3. Нам було потрібне SEO без перенесення всієї кодової бази на фреймворк для серверного рендерингу (SSR), такий як Nuxt.
Ми обрали пререндеринг під час збірки (build-time prerendering).
Пререндеринг перетворює певні маршрути на статичні HTML-файли під час процесу збірки. Коли бот відвідує ваш сайт, він отримує повний HTML-документ замість порожнього div.
Ми використали vite-plugin-prerender для нашого налаштування Vite.
Виконайте ці кроки для впровадження:
Встановіть плагін як залежність для розробки: npm install vite-plugin-prerender -D
Налаштуйте свій vite.config.js, щоб перелічити ваші маршрути.
Запустіть команду збірки.
Цей метод дає переваги для SEO без складності повноцінного SSR.
Джерело: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd