Преодоление ограничений 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 мы использовали vite-plugin-prerender.

Следуйте этим шагам для его внедрения:

  1. Установите плагин как зависимость для разработки: npm install vite-plugin-prerender -D

  2. Настройте vite.config.js, указав список ваших маршрутов.

  3. Запустите команду сборки.

Этот метод дает преимущества для SEO без сложности полноценного SSR.

Источник: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd