React e SEO - Githubissues

woliveiras commented 7 years ago

Motivo da issue

Pessoal, estamos fazendo um estudo sobre React e SEO para uma nova implementação.

Gostaria de saber de vocês se já fizeram algum experimento ou tem dados sobre o uso de React em e-commerce's e o impacto em SEO.

O nosso receio é que, com o uso de React (mesmo com SSR), possamos perder posições no ranqueamento do Google por algum vacilo.

Dúvidas

Vocês conhecem algum e-commerce que use React?
Se vocês já implementaram React em um e-commerce, tem dicas do que fazer para não ter problemas de SEO?

ericdouglas commented 7 years ago

O Walmart usa React. O blog deles no Medium é interessante.

paulinhapenedo commented 7 years ago

O Buscapé também usa React na página de produto, @woliveiras :) A gente não teve problemas com SEO por conta do server side rendering.

Eu participei do projeto, então se precisar tirar dúvidas, é só chamar!

nandomoreirame commented 7 years ago

Não se se encaixa na categoria Ecommerce mas o Airbnb usa react em produção, não sei se tem algum artigo ou coisa do tipo referente a isso.

E esse é um assunto bem interessante, aqui na @lojaskd queremos implementar algumas coisas com React ou Vuejs mas ainda temos esse receito, SEO é coisa bem séria :)

Obrigado por essa issue @woliveiras 🤘

woliveiras commented 7 years ago

Nóóóó, vai ser uma mega ajuda, @paulinhapenedo!

Eu posso fazer um levantamento das dúvidas da galera de SEO e trazer para a thread pra você nos ajudar?

mvfsillva commented 7 years ago

@woliveiras caso precise de alguma ajuda só falar, eu estou trabalhando em um projeto com server side rendering.

woliveiras commented 7 years ago

🙌 🙌 🙌 🙌 🙌 🙌

Compartilha como está sendo esse desenvolvimento pra gente, @mvfsillva.

Tipo, fica uma aplicação servindo dados de API e outra somente entregando os estáticos da SPA?

Preciso juntar o máximo de informações possíveis sobre esse assunto pra gente fazer um negócio bem feito. 😬 😬 😬

caioincau commented 7 years ago

Acredito que usando SSR não tem problema, alguém já trabalhou sem ssr? O Google está indexando, não sei se mto bem.

paulinhapenedo commented 7 years ago

Sem SSR eu acho arriscado até por questão de performance de carregamento da página, dependendo do tamanho da aplicação.

Sobre a dúvida do @woliveiras, a gente tinha uma aplicação única que servia os dados das inúmeras API que a gente batia, colocava tudo isso na store do Redux e servia pro front na hora de renderizar a view. Essa mesma aplicação era responsável pelo front também, montando os bundles de produção com os assets. A gente não usava CSS Modules nem CSS-in-JS nem Styled-Componentes. O CSS era carregado na página da forma tradicional.

woliveiras commented 7 years ago

Essa aplicação que você diz é um Node servindo os dados, @paulinhapenedo?

felipefialho commented 7 years ago

@woliveiras avisa quando sentir que a duvida foi resolvida o/

paulinhapenedo commented 7 years ago

Isso mesmo @woliveiras

woliveiras commented 7 years ago

Acredito que até aqui entendi o que deve ser feito que é seguir o fluxo com SSR e qualquer coisa eu dou outro grito na galera aqui! 😬

Pode marcar como resolvida, @LFeh

evansantos commented 7 years ago

eu invoco ~jesus~ @marquinhusgoncalves, virado em modo de ataque

rubenmarcus commented 7 years ago

Um adendo : https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2

raulfdm commented 7 years ago

@woliveiras Eu vi que foi marcado como resolvido, mas acho que vale a pena registrar aqui:

SEO vs. React: Web Crawlers are Smarter Than You Think

woliveiras commented 7 years ago

Oooopa, valeu!

hmaesta commented 7 years ago

Vale menção a esse serviço: https://prerender.io

rafaberaldo commented 7 years ago

Vale lembrar que usando SSR você terá mais custos de servidores, SPA sem SSR o servidor praticamente só vai servir o html e js, então o custo cai bastante.

Google e Bing conseguem indexar SPA desde que seja síncrono, tudo que é carregado assíncrono não é indexado.

Esse guia aqui, apesar de ter foco em Vue, tem bastante informação útil sobre SSR.

lucasdaiki commented 7 years ago

Testei o Electrode e o NextJS. Particularmente, não curti o Electrode. E Achei o NextJS FODA!

A estrutura do NextJS é muito mais simples
O Electrode é meio caixa preta, as coisas acontecem todas por baixo dos panos, pareceu um pouco complexo de customizar
A documentação e o 'step by step' do NextJS é bem legal.
A maioria (para não dizer todos) os conteúdos relevantes são produzidos por pessoas do Walmart, me pareceu um pouco de clubismo hehe

IgorHalfeld commented 7 years ago

Fala pessoal, venho dar um testemunho! hahah, apesar de não ter muito a ver com React, acho que vale a pena citar, como citei na minha talk sobre SSR.

Desenvolvi um marketplace da startup que eu trabalhei por um tempo (Moveleiros) que precisava de uma boa indexação pelo mesmo motivo de ser um marketplace :P, optamos por usar Nuxt.js que colocava em prática a simplicidade e produtidade do Vue.js. Então levantando uns poréns:

Rolês:

Tempo de Build é relativamente demorado.
Tamanho do Build é relativamente grande.

Não rolês:

Funciona muito bem, apesar de estar em beta.
Arquitetura de pastas interessante (claro que tendo experiência com apps front-end, se não ao longo do tempo você se perde, assim como em qualquer arquitetura...)

rubenmarcus commented 7 years ago

@Halfeld cara, pensei em usar o Nuxt para pegar um WP-API-Json e transformar os dados no meu portfolio, assim deixando ele gerenciavel via um cms, e também sendo feito em Vue.js e podendo ser indexado pelo Google.

Acha uma boa idéia?

É que eu nunca fiz um projeto em Vue. E pensei em começar pelo meu portfólio. Mas ai tem o lance de SEO e também de que queria que fosse gerenciável. Apesar que sempre vou ter que buildar certo?

Acha que ficaria mais lento em produção do que usar um Static Site Generator?

rubenmarcus commented 7 years ago

@Halfeld Alias eu tenho 3 portfolios que queria fazer

1: Web - Trampos de Front e Webdesign - API WordPress pra gerenciar páginas do portfolio , e API do Medium para parte de blog ( assim os posts de blog já ficava tudo centralizado no medium que tem a vantagem de ser uma rede social) - WordPress, Medium + Vue.js com Nuxt.js

2: Fotografia - Trampos de Fotografia: API do Tumblr, que tem uma indexação e comunidade absurda que rebloga os trampos, ou do Flickr, em SSR feito em React e Next

3: Artes Digitais : API Tumblr + React e SSR Next

acha possivel? Digo , acha que vale a pena construir assim, seriam meus primeiros projetos nas tecnologias, já fiz algumas coisas mais simples, tipo exemplos pequenos, mas queria fazer esses projetos ai.

IgorHalfeld commented 7 years ago

@rubenmarcus Fala brother, então a pegada de fazer o portfolio cosumindo essas APIs com o SSR seria interessante mesmo, já que quando fosse rendenrizado no cliente, todas as informações já estariam lá pois os requests para as APIs já teriam sido feitos e o SEO ficaria zika das zikaria \o/

O Nuxt usa o comando build pra ele rodar o comando start depois, pois pra iniciar o servidor ele precisa de algumas configs e você vai ter o AoT, mas ele te dá também o comando generate que te deixa colocar a aplicação em qualquer servidor estático (AWS S3, Github Pages...).

Mas não precisa ser em Nuxt especificamente, qualquer solução de SSR para framework front-end moderno vai resolver esse problema :D

Acho uma saída possível sim, se você precisa de SEO, fazer dessa forma vai te agilizar bastante já que é mais ou menos como construir uma app front-end comum, só que lidando com poréns de back-end.

rubenmarcus commented 7 years ago

@Halfeld mas cada página nova no Wordpress, Cada post novo no tumblr ou medium, eu ia ter que rebuildar ele e deployar? É isso? Pra ele gerar por exemplo: http://meuportfolio/trabalhos/trabalho-novo.html ?

http://meuportfolio/blog/post-novo.html ?

ai até usar um npm script pra dar deploy , quando tivesse conteúdo novo? uma cron será que rolaria? Hoje eu tenho um servidor shared na bluehost (PHP&MYSql), mas com o heroku eu consigo fazer essas apps ai não é?

rubenmarcus commented 7 years ago

@Halfeld Alias mano eu fui na sua palestra do Imasters aqui em SP sobre Vue e foi muito legal mano!!! Parabens!

IgorHalfeld commented 7 years ago

@rubenmarcus valeu man :heart:

Você não iria precisar re-buildar porquê sempre que fizerem resquests pro seu portfolio, os AJAXs que você colocou pras APIs ainda vão continuar sendo feitos, a grande diferença nesse caso é que e AJAX vai acontecer no server e não no client.

Ou seja, não precisa que o js tenha sido baixado e parseado pelo browser para acontecer os AJAXs e então colocar as informações no DOM, tudo isso já aconteceu no server quando o request foi feito :D

rubenmarcus commented 7 years ago

Entendi, eu pensava que SSR era basicamente transformar tudo em html estático,fazendo o processamento no servidor, e gerando os arquivos.

IgorHalfeld commented 7 years ago

@rubenmarcus basicamente é um pre-render, mas com a facilidade de fazer isso com um framework front-end moderno

igorfelipee commented 6 years ago

As quatro marcas da B2W usam React.

Americanas, Submarino, Sou Barato e Shoptime.

willycamargo commented 6 years ago

Desenvolvi dois sites institucionais recentemente utilizando o Gatsby. https://www.gatsbyjs.org/

didiraja commented 6 years ago

A Oi usa React com SSR também

alexsandro-xpt commented 6 years ago

@willycamargo Gatsby tem o mesmo propósitos que os: https://gohugo.io/ https://www.netlifycms.org/ https://jekyllrb.com/

?

willycamargo commented 6 years ago

@alexsandro-xpt Não tive experiência com os citados, mas dando uma olhada no site esta bem próximo das propostas do Jekyll e o Hugo sim.

O NetlifyCMS parece ter uma proposta bem diferente, inclusive pra ser usado como Content Management "integrado" com esses geradores que citamos...

Preciso confessar que o que me levou a decidir pelo Gatsby foi meu gosto por React. E não me arrependi hehe.

frontendbr / forum

React e SEO #631

Motivo da issue

Dúvidas