ReactJS é uma boa para um site institucional?

[wilsongomes-swe]

Fala galera, boa tarde,

vou iniciar um projeto de um site cuja a função é apenas listar alguns filmes com links para eles em serviços de streamings... Vai ter páginas comuns a um site (Sobre a empresa, postages, contato e etc...)

Estamos em uma discussão saudável aqui, o pessoal do SEO quer fazer em HTML'zão mesmo, enquanto alguns querem usar React já que usamos react em nossas aplicações e mobiles.

Em questões tecnicas, fazemos tranquilo em react ou em apenas .html... a dúvida aqui, React é uma boa para sites "normais" assim como é uma boa para aplicações (paineis, cruds e dashboars).

Muito obrigado, abbraços!

[pedrogustavo]

Creio que nesse caso, você pode usar o Next.js pra poder gerar seu html estático, e desenvolver com o React. O problema de fazer só com o React, seria o SEO, com o Next você poderia desenvolver em React e gerar os arquivos estáticos, sem a necessidade fazer Server rendering, se quiser dá uma olhada aqui: https://nextjs.org/features/static-exporting

Nunca cheguei a mexer no Next, já fiz isso apenas com o Nuxt (vue.js), mas imagino que funcione da mesma forma.

[nandomoreirame]

Cara, eu uso o Gatsby, ele é ótimo!
Para alguns clientes eu já usei o Nuxtjs (Vue) que também é ótimo! Ambos geram o HTML estático no final, usando SSR, no build. É muito melhor do que HTML`zão pq vem junto o SPA ❤️

[wilsongomes-swe]

Mas por exemnplo, não vai ser necessáriamente estático... Vai ter consultas na base e etc... estes frameworks resolvem esta questão?

[fabiomirandaa]

Que tipo de consultas você faria?

[fabiomirandaa]

O conceito de site estático que o @nandomoreirame e @pedrogustavo se referiram, não é que você vai fazer um site que é só HTML/CSS/JS e ter que mexer lá no HTML toda vez que você tiver que customizar algo. Essas ferramentas citadas, geram um site estático no final das contas, ou seja, a versão de produção já buildada é a versão já compilada de tudo.

Com o Gatsby, você pode usar o GraphQL pra fazer consultas. Caso você prefira fazer consultas com o padrão REST, você pode usar o Next.

O interessante dessas tecnologias é que elas geram o conteúdo estático que pode ser lido normalmente pelos robôs de searching, melhorando assim o SEO como você estava discutindo com o pessoal aí.

[fabiomirandaa]

Lá no Next, inclusive , o Get Started é uma aplicação que consulta uma API de shows de Tv. Pode fazer, é rapidinho e você vai ter uma noção legal de como se comportaria o site que você quer fazer =)

[wilsongomes-swe]

Legal, pensando em como quando por exemplo o pessoal atualizar a lista de filmes pelo painel, como seria o comportamento, mas vou lá fazer esse get started do next para ter uma noção melhor, muito obrigado!
(Acho que vou soltar a primeira versão sem next na segunda ou terça, enquanto em paralelo entendo o fluxo do next e até a outra segunda já implemento ele)
Valeu!

[iagobruno]

React fica bom em qualquer projeto 😄, você tem que se perguntar se é uma abstração necessária.
Eu faria em HTMLzão mas se tu quiser usar mesmo assim então segue a dica do @pedrogustavo e usa o NextJS.

[wilsongomes-swe]

Entendi, mas mais uma última dúvida que o core dessa thread... Se eu faço em react e uso o server side rendering com Next, a gente faze tramquilo lá na empresa, ou se for em htmlzão simples tbm tranquilo, mas... Existe algum pró ou contra forte que faça um destes dois serem a melhor prática neste caso?

(Vejo que o html vai ser mais rápido a entrega, mas em nossos projetos a manutenção com react é bem mais fácil e rápida)

Mas é mais isso, pq eu deveria usar react neste contexto? Porque eu não deveria? Ou é irrelevante?

Abraço!

[felipefialho]

Pra esse caso, se quiser seguir com React, dá uma olhadinha no Gatsby :)

[iagobruno]

Pq eu deveria usar react neste contexto? Porque eu não deveria?

Não é que você pode ou não pode, você só tem que se perguntar se vale a pena adicionar todo o código e abstração do framework. Olha só esse relatório de quantos % de código NÃO está sendo usado em um simples app feito com React:

Fiz o mesmo teste no meu portfólio e deu 62%.

O React é uma excelente escolha para interfaces complexas mas pra um site institucional eu acho desnecessário.

[fdaciuk]

Você pode usar React para criar seu site institucional, e ainda assim não fazer seu usuário pagar o preço de baixar a lib inteira, no final das contas. Eu chamo isso de "usar React sem React".

O que você precisa fazer pra ter esse resultado é o seguinte: crie seu site normalmente com React, mas apenas com componentes puros, stateless, como você faria no HTMLzão.

Depois é só criar uma configuração básica para gerar a string do HTML desse app, e servir essa string em um arquivo HTML padrão, sem importar o React. Simples assim :)

Eu criei um exemplo disso a alguns anos atrás, criando um plugin pra webpack.

Não está com a versão mais recente do webpack, mas acho que dá pra ter uma noção do que você vai precisar pra fazer isso:

https://github.com/playgd/webpack-playground/tree/master/static-site

[wilsongomes-swe]

Opa, valeu @fdaciuk!! Vou ver já

[glauberm]

@fdaciuk Poxa, mas aí você perde o Virtual DOM, por exemplo. Acho que vale mais a pena apostar em uma alternativa mais leve, como o Preact.

[fdaciuk]

@glauberm mas vc não precisa de Virtual DOM (ou DOM, no geral), se vai ser um site estático!
Se não tem regra lógica, nem necessidade de JS, pra que virtual DOM? ;)

[glauberm]

@fdaciuk O DOM existe a gente fazendo uso dele ou não, né. Mas realmente não precisamos do Virtual DOM se não quisermos. Mas aí você estaria usando o React só como um pré-processador, é isso? 🤔

[nandomoreirame]

Usa o Jekyll ou um Boilerplate como o Kratos do @felipefialho e tá sucesso!

[fdaciuk]

@fdaciuk O DOM existe a gente fazendo uso dele ou não, né.

Sim, o que eu quis dizer foi que não haveria a necessidade de manipular DOM através da API DOM :)

Mas realmente não precisamos do Virtual DOM se não quisermos. Mas aí você estaria usando o React só como um pré-processador, é isso? 🤔

A ideia de fazer como eu falei, é basicamente aproveitar todas as vantagens de se usar o React: componentização, melhor aproveitamento de código, etc. Isso em ambiente de desenvolvimento.

Em produção já não precisa do React nesse caso, mas se precisar dar manutenção no futuro, toda a sua aplicação vai estar componentizada, e você não vai precisar ficar mexendo em HTML puro :)

[nandomoreirame]

Gatsby levanta US$15 milhões galeres <3

https://techcrunch.com/2019/09/26/gatsby-raises-15m-series-a-for-its-modern-web-development-platform/

Não sei o que dizer, só sentir.