15

É notório que o desenvolvimento de aplicações web de um tempo pra cá tomou um rumo bastante "diferente". Frameworks como AngularJS, Vue e ReactJS tem se tornado bastante populares, pois em comum eles promovem a reatividade, componentização e afins.

No geral, quando utilizamos um desses acima, a aplicação é renderizada toda a partir do Javascript, os elementos são gerados dinamicamente.

Eu particularmente vejo vantagens em algumas coisa e utilizo o Vue para construir algumas aplicações frontend.

Porém algo tem me preocupado ultimamente: Constantemente, tenho visto artigos ou cursos, dizendo que é necessário utilizar SSR - Server Side Rendering, que consistem em um servidor NodeJS fazendo todo o trabalho de renderização dessas aplicações rodando do lado do servidor.

No caso, conheço o Nuxt.js do Vue, e o Next.js do React, que fazem a renderização da aplicação construida a partir do servidor.

Na maioria dos casos, vejo as pessoas falando que o SSR é necessário por causa do SEO do site.

Mas aí agora fica algumas perguntas:

  • Quais são as necessidades de se usar SSR?
  • Aplicações renderizadas pelo cliente tem ou pode ter quais problemas com SEO?
  • Quais desvantagens tenho ao construir uma aplicação Javascript sem usar o SSR?
  • Se o framework/biblioteca tem problemas em ser renderizado do lado cliente, não seria melhor voltar a programar focado em linguagens de backend que já faziam isso, como PHP, Ruby ou Python? Usar essas aplicações que dependem de SSR não seria um retrocesso?
7
  • 3
    Pontualmente sobre o SEO isso deve te interessar. E vc vai entender pq fazer o SSR pode sim afetar diretamente o SEO, já que não da para garantir que os crawlers vão esperar e reescannear o DOM depois que vc manipula-lo com scripts no client-side. Por isso seria indicado já entregar tudo renderizado, pois não se tem certeza que os bots vão indexar direito seu conteúdo manipulado depois que a requisição já foi entregue. Mesmo os bots sendo capazes de executar scripts... pt.stackoverflow.com/questions/406120/…
    – hugocsl
    Commented 20/09/2019 às 12:49
  • 4
    Basicamente o SSR do VUE é pra consertar aquilo que o pessoal da "moda" em geral não tinha entendido até então. O HTML sempre foi SS por natureza, mas mesmo com o advento do Ajax, tem um pessoal que foi esperto desde o começo, e fazia coisa server side que melhorava com JS, sem perder o server side. Infelizmente, uma parcela do pessoal do JS não olhou a figura maior e atropelou em boa parte dos frameworks. Por exemplo, tem muitas iniciativas como o pjax.js do colega @GuilhermeNascimento que já são o verdadeiro SSR por natureza sem precisar de remendo.
    – Largato
    Commented 20/09/2019 às 13:01
  • 4
    SSR: Solução criada para resolver problemas que as mesmas pessoas criaram.
    – Syzoth
    Commented 20/09/2019 às 13:05
  • 5
    Você está no ponto A abre um caminho para o ponto B porque acha que lá é mais bonito. Você percebe que B não é exatamente o que você esperava e deseja voltar ao A. Você tem duas opções: 1) voltar pelo mesmo caminho até A ou 2) Abrir um novo caminho e parar em C achando que está em A. SSR é a segunda opção.
    – Woss
    Commented 20/09/2019 às 13:05
  • 2
    @WallaceMaxters, considerando que isso vem da comunidade JS, eles gostam de reinventar a roda e pensar que estão na crista da onda =P O GitLab funciona com algo meio SSR, mas numa abordagem mais template: a máquina de frontend consulta a máquina de APIs depois de traduzir a requisição do browser, então, em cima dessa resposta, ele monta o HTML a ser enviado. Commented 20/09/2019 às 13:06

1 Resposta 1

18

TL;DR

CSR (Client Side Rendering):

  • prejudica o SEO
  • prejudica a UX
  • é ineficiente

em certos cenários.

Detalhando

Tem resposta minha aqui que foi contestada onde eu dizia que SEO te ferra se usa JavaScript pesadamente. Segundo as pessoas que contestaram "SSR serve para nada, é uma fantasia desnecessária", elas não disseram isso, mas o que afirmaram indica isto.

Na real esta técnica é necessária porque o SEO é prejudicado já que é complicado simular toda situação que um usuário pode mandar fazer quando se abusa do uso de JavaScript para montar o conteúdo no cliente, então obviamente que certos conteúdos podem nunca ser indexados, ao contrário da crença popular que se espalhou por aí para vender certa tecnologia. E em muitos casos haverá perda de performance quando o cliente é muito "sofisticado" e pode atrapalhar a performance que atrapalha o SEO.

Existem algumas situações muito específicas que um crawler consegue identificar que há ações dinâmicas e renderizar corretamente, mas não pode entender todas, especialmente aquelas iniciadas pelo usuário.

Além disto existem situações que o cliente pode não ter condições de executar tudo o que seria necessário para montar a página prejudicando a experiência do usuário que não veria o conteúdo adequadamente, podendo até ver nada, ou criando dificuldades.

Recentemente teve uma resposta aqui no SOpt (já apagada) que afirmava que AJAX deveria ser usado sempre, sem dar justificativas, só opinião, e a pessoa insistiu depois de contestada. As pessoas fazem coisas sem realmente entender o que acontece de fato e acabam "ensinando" outras pessoas de forma errada. E quem não tem conhecimento assume que seja verdade. AJAX pode não estar disponível ou pode deixar uma carga mais lenta, ao contrário da crença popular. Um site que tinha um grande volume de acesso adotou AJAX certa vez e piorou muito a performance dele. Eles abandonaram depois que eu mostrei que AJAX não era mágico como eles imaginaram, foi mais um caindo no conto da carochinha.

Performance ruim, as vezes nem por culpa do cliente, mas da conexão ruim, pode atrapalhar a experiência do usuário. O ideal é até que a renderização gere conteúdo estático. Além de tudo terá ganhos de eficiência no custo do servidor.

Obviamente que se você tem um cliente esperto que renderiza de forma complexa e sabe que é bom ter a renderização no servidor também para não cair nos problemas apresentados acima, não vai querer fazer códigos diferentes em cada lado, então é interessante ter alguma ferramenta que usa o mesmo código do cliente para executar no servidor. Mas não sei a qualidade delas, se consegue reproduzir tudo.

Abuso de web e SPA

Algo que eu percebo é que quase sempre você tem uma aplicação web que não precisa de SEO ou tem um website que pode ser bastante ou totalmente estático, mas as pessoas usam frameworks pesados que consumem muito processamento para dar o mesmo resultado. As partes que realmente tem dinamismo em um website deveriam ser só facilitadores para chegar em certas páginas que já estão renderizadas. Mas as pessoas estão seguindo regras sem entender as motivações.

Acho a última questão opinativa ou no mínimo dependente de cenário. Eu acho que você não deveria fazer a renderização no cliente se não precisa. A maioria das pessoas fazem isto ao extremo porque está na moda, isto está errado, por definição.

De forma geral eu não vejo problemas na renderização do lado do cliente em aplicações web, até porque o abuso de usar web para aplicações já é um erro em si, então não faz tanta diferença outros erros. Em aplicação (inclui PWA) não precisa de SEO e espera-se que a pessoa tenha condições de executar aquilo de forma adequada, se não puder é pra não funcionar mesmo. Você pode por um requisito na aplicação do que precisa para rodar.

Se está fazendo sites, é melhor fazer o máximo possível conteúdo estático mesmo que através de geração de um CMS no servidor, ou se for dinâmico que seja feito de forma básica. Em aplicações depende.

Note que não estou falando que fazer alguma melhoria usando renderização no cliente não possa ajudar, o problema é o abuso. As pessoas aprendem algo, depois falam um pouco mais sobre aquilo, aí a conversa vai evoluindo, e vão adotando novas técnicas, que podem ser úteis em certa medida, em certos cenários, mas as pessoas resolvem adotar para tudo e perde a motivação real. Lembre-se do progressive enhancement.

Faz o simples, quando ele não é suficiente vai adicionando funcionalidades justificadas com real motivação considerando todas as desvantagens dela e já tratar essas desvantagens na hora. Me desagrada que as pessoas adotem algo e depois vão atrás de uma solução para resolver os problemas que elas causaram, que é um "mantra" que eu repito muito. Boa parte do que se inventou nas últimas décadas de TI é conserto para um problema que não existia antes de alguém adotar algo errado. Tinha um ou dois problemas em aplicações desktop, agora tem diversos em aplicações web. Não era melhor consertar os problemas conhecidos do desktop do que fazer tudo de novo em algo que não para de aparecer problemas?

Coloquei no GitHub para referência futura.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .