Pre render com vue

[degoyto]

Eu sou novato na programação web, eu achava que era só fazer a pagina html e colocar no site e tava pronta, mas eu tava muito que enganado.

Então, tou com um pequeno problema, meu site é portal de notícias, e cada notícia tem sua página e tals, como qualquer outro, faço a rota ("/noticia/nomenoticia") e os dados é pego em um BD, então, eu fui colocar o plugin do facebook para compartilhar e deu um problema, pq o face só pega o meta la do index.

Em pesquisas vi que precisa renderizar no server ou pre-renderizar. Resolvi pre-renderizar
e tou usando Prerender SPA Plugin. Eu coloco as rotas que quero pre renderizada, mas essa rota em questão só é criado quando tem uma requisição do BD

Como contornar esse problema?

[SkyaTura]

Dá uma pesquisada sobre o NuxtJS. Ele é um framework criado em cima do Vue para solucionar problemas como esse de uma forma muito mais simples e intuitiva. ;)

[VitorLuizC]

Você precisa de SSR, server-side-render, ao invés de pre-render. Ou então criar alguma maneira de rodar o pre-render sempre que criarem uma nova matéria, deve dar para fazer isso com uma lambda que você roda sempre que criar/alterar matérias.

Se você for atrás de SSR, o Nuxt.js (que o @SkyaTura comentou) é excelente!

[degoyto]

eu tentei usar o nuxt, mas não sabia oq fazer com os arquivos que gerei com build.

do jeito que ta, tem um back feito com node rodando em um host "apptals.com", e outro rodando o front "meusite.com", ai com o nuxt pego tudo que foi gerado na pasta dist e coloco no "apptals"?

ai o front vai ser acessado pelo "apptals" tb?

[VitorLuizC]

Aí é que tá, o Nuxt.js vai gerar um "projeto" para você rodar com Node.js no back-end. Esse projeto lida com roteamento e já renderiza as views quando o usuário faz o primeiro acesso (depois do primeiro o usuário já carregou o client e a aplicação funciona como SPA normal)

[SkyaTura]

Como você tá começando agora, vou te explicar algumas coisinhas pra te dar um pouco de contexto sobre o problema e como nós estamos resolvendo.

Páginas Web

Originalmente a Web foi criada com arquivos estáticos de HTML, depois apareceu o CSS e o JavaScript mas tudo era estático no sentido de que o conteúdo era fixo.

Com a necessidade de entregar conteúdos dinâmicos e que dependiam de algum contexto, foram criados diversos tipos de soluções que entregavam HTML diferentes de acordo com o endereço que você acessava (assim surgiu o PHP, por exemplo).

Porém, a evolução do JavaScript nos trouxe aos tempos atuais, onde o ideal é separar o BackEnd do FrontEnd (é aqui que entra o Vue), e os sites voltaram a ser estáticos novamente, porém, com muito mais poder para modificar seu conteúdo dinamicamente de acordo com a necessidade e buscas feitas em segundo plano em APIs.

VueJS

Uma instalação comum do Vue funciona no formato de SPA (Single Page Application), ou seja, mesmo que você crie diversas páginas diferentes, o conteúdo HTML gerado serve apenas para carregar os arquivos JavaScript que vão montar a sua página.

SEO

Apesar das diversas vantagens que nós temos com o SPA, inclusive funcionamento offline, esse formato impede que ferramentas automatizadas com indexadores de pesquisa (Google, Bing e etc) e outras como essa do FaceBook que vc tá procurando.

Esses plugins todos procuram referências estáticas, e como no SPA é sempre igual, ele não identifica as mudanças pois o código JavaScript que faz as mudanças não é carregado por eles.

NuxtJS

O Nuxt veio para solucionar esse problema de SEO e algumas outras otimizações de desempenho.
Ele permite que você desenvolva normalmente seu site em Vue, e automagicamente, ele gera um servidor que "pré compila" as páginas e entrega o HTML já resultante para o cliente. Bem semelhante aos antigos servidores em PHP.

A principal diferença com o Nuxt é que essa informação que vem do servidor acontece apenas na primeira requisição, depois que o site é carregado no seu dispositivo ele passa a se comportar como um SPA, oferencendo o melhor dos dois mundos.

O Nuxt funciona de 3 maneiras distintas:

Server Side Rendering (SSR)

Quando você builda, ele gera um outro projeto em node que você deve executar no seu BackEnd e ele vai fazer o trabalho do servidor de entregar as suas páginas.

###Single Page Application (SPA)
Quando você builda, ele gera arquivos HTML, CSS e JavaScript com o seu site para ser carregado, é bem parecido com o que você já está fazendo usando o "vue puro"

###Pre-render
Também é um SPA, ele não tem nada "dinâmico" rodando no seu back-end e o resultado são arquivos HTML, CSS e JavaScript. Porém, o diferencial desse modo é que você pode "pré renderizar" as sua páginas.

Conclusão

Eu aconselho que você dê uma boa estudada nesse conteúdo, leia a documentação do Nuxt e procure artigos sobre VUE e SEO antes de tentar pular de cabeça pra resolver o seu problema. Mais importante do que resolver, é entender o que deve ser feito para chegar a solução.

[degoyto]

muito obrigado pela a ajuda, galera

Eu coloquei os arquivos gerados no .nuxt no meu uol host. Na verdade nem sei se são esse arquivos pra colocar.

ai ta dando esse erro:

SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.runMain (module.js:611:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:160:9)
/opt/web/webapps/server.js:1
(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'

[SkyaTura]

O .nuxt é uma pasta com códigos temporários que o Nuxt gera para fazer um build mais rápido, não deve ser usado pelo usuário final para nada.

Dá uma olhada nessa parte aqui da documentação
https://nuxtjs.org/guide/commands/