Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Com o electrode, não há uma maneira de fazer o deploy em um s3 por exemplo?

Olá, minha dúvida agora é, como agora o electrode é um server application, não é possível fazer um deploy dele em um gerenciador de arquivos estáticos, certo?

Por exemplo, tenho uma aplicação gerada com create-react-app da qual eu gerei o npm run build e subi diretamente em um s3 da aws, que é disponibilizada acessando sempre o arquivo index.html. Mas realmente tinha o problema de ser uma DOM virtual, e não ser renderizada, com isso, eu não estava conseguindo ajeitar o SEO, os bots do google não entendem que tem conteúdo naquela página.

Com isso eu trago minha duvida. Há uma maneira de fazer o s3 rodar uma aplicação em react gerada com o electrode? Outra dúvida seria, meu projeto é um site com algumas páginas que são estaticas, e apenas 2 delas que tem interação com um servidor back-end, buscando dados, consultando, e trazendo para minha view. Seria o caso de, o React não é a ferramenta ideal para meu projeto, ou pelo menos o create-react-app não é a ferramenta ideal?

A ideia de servir o site pelo AWS S3, é questão de baixo custo, e também um bom desempenho, pois são várias páginas estáticas, com apenas 2 conteúdos que buscam dados em uma API.

Obrigado.

9 respostas

Em um podcast do Hipsters, da qual o Alberto Souza participou, falando sobre React. Afirmaram que seria possível usar o React sem SPA. Seria este o caso? Eu conseguiria manter o site serverless, com CSR (client side rendering)? Sendo renderizado o conteúdo de uma view no first loading?

Encontrei este artigo no medium https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9

Da qual fala que o Google e outros motores de busta, já estão se adequando para conseguirem interpretar uma página com o Javascript renderizando (CSR).

Fiz um teste com o próprio react-router, ao buscar, vi que ficou em segundo lugar na busca do google aparecendo da seguinte forma Imagem.

Beleza, ao acessar o site (Img), e exatamente o texto indexado no google, está nesta página (Img).

Beleza, então fui olhar o source code, e me deparei com isto: (Imagem do source code).

Esta como uma aplicação com create-react-app. apenas um elemento <div id="app"></div> que foi renderizado. Chamando um único script além do Google Analytics.

Queria saber se já ouviram falar algo sobre isso, realmente os motores de busca agora conseguem interpretar SPA's com CSR? Ou não é tão simples, é alguma lib que faça isso, ou alguma configuração externa, no google webmaster tools, etc?

Obrigado novamente!

*Obs: as imagens estão no cloud do mozilla, estarão disponíveis apenas por 14 dias

O CSR é bem bacana e vem sendo a cada dia mais bem aprimorado. Mas ainda não é garantido, por via das duvidas é sempre bom uasr o SSR :) o google vem se adaptando bastante com relação a isso, em breve talvez só o CSR já seja o suficiente.

Sem o SSR você poderia ter problemas em um e-commerce por exemplo, que depende muuuuito do SEO.

O Google tem indexado cada vez mais WebApps baseadas em JS. Mas é bem menos garantido que um HTML bocó gerado pelo SSR. Recomendo testar se no seu caso ele vai conseguir indexar direitinho.

Sobre o S3, acho que rola usar sim pra SPA, só tomar cuidado pra fazer o roteamento via hash na URL e nao com path normal (senao vai dar um 404 quando usuario der reload numa rota dinamica ou qdo google for indexar).

Por fim, sobre usar React por causa de 2 paginas que buscam um Ajax no servidor e montam uma tela. É entao, sei la, eu nao sei direito seu caso, mas constumo preferir um JS mais simples quando o cenario é simples. As vezes 20 linhas de JS fazem o que vc ta precisando de milhares do React pra resolver.

Agora, se gosta do React como modelo bacana de componetizacao e tal, usa ele mas gera um site estatico - tipo um SSR em build time, que gera só coisa estatica. Usa o React pra desenvolver mas nao pra servir pro cliente.

Obrigado Mario Souto E Sérgio Lopes pelas dicas.

Sérgio, sobre o que disse: "Agora, se gosta do React como modelo bacana de componetizacao e tal, usa ele mas gera um site estatico - tipo um SSR em build time, que gera só coisa estatica. Usa o React pra desenvolver mas nao pra servir pro cliente."

Rodo ele local mesmo, server-side com um node. Mas ele gera um build com HTML estático? Ou vai ser da mesma forma que o create react app por exemplo. Que o build usa virtualDOM, carrega todo o conteúdo após a renderização?

*Obs: Sérgio, uma curiosidade, antes de entrar na área de desenvolvimento web, acabei encontrando seu blog, com dicas, reviews, acabei lendo e com a forma que você comentava sobre as coisas, acabei me interessando. E depois de ler seus artigos etc, que me interessei por dev. web e fui atras :) Isso foi em 2013 hahaha e hoje sou dev front-end. Obrigado :)

solução!

Então, essa ideia que mandei, mais radical, seria de escrever a App em React e aí buildar só HTMLs estatáticos simples sem a dependência do React no client. O browser nunca ficaria sabendo que foi escrito em React. É tipo usar o React como um PHP, só no backend.

(aí dá pra fazer dinâmico, com SSR regerando cada rota a cada request ou estático em build time gerando HTML estático.)

Quem foi pra essa linha de remover o React do client-side mas mante-lo pra desenvolvimento foi o Netflix: https://twitter.com/NetflixUIE/status/923374215041912833

Pra implementar é "basicamente" fazer o build ou SSR no HTML e remover todos os <script> do HTML. Idealmente vc tera uma App HTML pura que nao usa o React no front. ( pra fazer o build aí depende do framework que vc ta usando; nao sei no creat-react-app, mas no Next.js por exemplo é só um comando pra buildar)

* Que legal, fico muito feliz :)

@Sérgio Lopes, Muito obrigado pelas dicas mesmo! Essa ideia é mais radical, mas é perfeita para algumas de minhas necessidades! Eu não conhecia essa vertente de exportar para HTML's estáticos!

Uma última dúvida (desculpa, ja devo estar enchendo o saco néh! hahaha): Sobre o que você falou de: "Pra implementar é "basicamente" fazer o build ou SSR no HTML e remover todos os

@Sergio Lopes, acabei de ler toda a documentação e fazer uns testes aqui, criei uma página que tem um form que bete em uma api.

MUITO BOA essa solução! Eu escrevo usando a propria fetch api, em server side no desenvolvimento, e gero um build em HTML estático, que traduz essa requisição e mantém!

Muito obrigado pela ajuda mesmo! Adorei esse Next.js, foi além do que eu havia perguntado, mas foi uma solução bem melhor!

Haha boa, legal! O Next tem ganhado bastante mercado ultimamente, parece bacana.