𝗦𝘂𝗽𝗲𝗿𝗮𝗻𝗱𝗼 𝗮 𝗟𝗶𝗺𝗶𝘁𝗮𝗰̧𝗮̃𝗼 𝗱𝗼 𝗦𝗣𝗔
Single Page Applications (SPA) como o Vue.js oferecem grande velocidade e experiência do usuário. Transições fluidas e gerenciamento de estado rápido tornam o desenvolvimento fácil.
Você enfrenta um problema se o seu negócio depende de tráfego de busca orgânica. Bots de mecanismos de busca frequentemente veem uma casca HTML vazia quando visitam um SPA. O Google processa JavaScript lentamente. Outros mecanismos de busca têm dificuldade em indexar seu conteúdo.
Construímos o Global Full-Stack Developer (GFD) usando Vue 3. Precisávamos de SEO sem migrar toda a base de código para um framework de Server-Side Rendering (SSR) como o Nuxt.
Escolhemos o prerendering em tempo de build.
O prerendering transforma rotas específicas em arquivos HTML estáticos durante o seu processo de build. Quando um bot visita seu site, ele recebe um documento HTML completo. Isso acontece em vez de uma div vazia.
Usamos o vite-plugin-prerender para nossa configuração do Vite.
Siga estes passos para implementá-lo:
Instale o plugin como uma dependência de desenvolvimento: npm install vite-plugin-prerender -D
Configure seu vite.config.js para listar suas rotas.
Execute seu comando de build.
Este método oferece benefícios de SEO sem a complexidade de um SSR completo.
Fonte: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd