ReactJS ou NextJS

[pperesbr]

Olá a todos!!!

Estou desenvolvendo uma aplicação que vai ter um backend e também o front, no front pintou a dúvida sobre usar ReactJS ou NextJS, em ambos estou aprendendo ainda (fazendo um curso aqui rsrsr), o NextJS parece ser mais simples algumas coisas e menos burocrático digamos assim na hora de desenvolver.

Tudo o que eu vejo na internet falando de NextJS é sobre o caso de indexação as consultas do Google por exemplo, ou seja, as aplicações sempre estão expostas na rede, o que não é o meu caso, as aplicações que pretendo fazer serão usadas internamente, na rede privada da empresa.

Nesse caso, vale a pena usar o NextJS ou usar o ReactJS?

Obrigado!!!

Abs,

[ninetails]

Esclarecendo: O next.js é um metaframework feito em cima da biblioteca React.js

Ao utilizar o Next, você estará utilizando o React, com os ganhos desse framework que é ter uma estrutura de aplicação já pronta e facilitado para criação de PWA. O React em si é só uma biblioteca de visualização.

Sem utilizar o Next seria como ter que desenvolver sem utilizar um framework, ou seja, você teria que fazer de uma outra maneira pra sua aplicação como ela deve rodar no navegador. Geralmente fazendo com React puro, ele só funcionaria no navegador criando uma SPA.

Eu sei que tem uma sopa de letrinha aí em cima, mas vale dar uma pesquisada antes.

[wilsongomes-swe]

Grande @dobicz , assino em, baixo tudo que o mestre @ninetails falou, usando o NextJS você estará usando React.

Dito isto, você deu um detalhe interessante sobre o seu cenário, você não vai expor esta aplicação, o que me leva a crer que seja algo protegido por login e talvez um backoffice e vários forms, mais para o lado de aplicação do que para o lado de um site...

O NextJS te traz vantagens de SEO e algumas vantagens de performance, fora o ISG, SSG e SSR que são fantásticos, mas que você não vai aproveitar muito no teu caso.

Em contra partida, o React faz SPA, e uma SPA diferente do NextJS não precisa de um servidor, você pode hospedar sua app React em um S3, Azure Blob Storage, Netlify, enfim, é apenas arquivos estáticos, já para o NextJS você precisa de um server node, pense então que um server na Azure básico custa cerca de U$ 60 / mês enquanto um bundle react no Azure Blob Storage custará U$ 1 por mês, mais uns U$ 2 de CDN... A decisão que eu tomaria aqui seria com certeza pautada em custo e advogando a favor de utilizar react puro.

Espero que ajude,
forte abraço!

[pperesbr]

@ninetails e @wilsonneto-dev obrigado pelas respostas.

@wilsonneto-dev realmente será uma app mesmo, o único detalhe é que com relação a custo, é algo que não vou precisar me preocupar, a aplicação vai rodar em cima da infraestrutura interna da empresa que trabalho (temos um farm de servidores e tenho um servidor exclusivo para rodar a minha aplicação), no máximo será acessada via VPN que temos para os funcionários.

Será uma aplicação com no máximo 50 usuários cadastrados, é uma aplicação pequena que estou aproveitando para treinar o que eu estou estudando com NodeJS e ReactJs.

O pensamento de usar o NextJS foi por achar ele mais produtivo a principio (isso é só uma percepção de quem não tem experiência ainda baseada no que estou vendo no curso que faço) e também já aproveitar para aprender os conceitos que quando pintar algo que precise ir para web usar o que o pessoal usa.

Abs,

[lucashfreitas]

Opa, tudo beleza? Vou citar algumas diferencas e colocar mais informacao a disposicao que vai despertar mais curiosidade e espero que te ajude a intender as principais diferencas/utilidades e tomar a decisao correta:

ReactJS :

1. Caso desenvolver em react voce vai estar criando uma SPA. (Single Page Application). Para hospedar uma SPA voce vai precisar apenas de um servidor entregando arquivos estaticos (html,css,js,etc). O seu site pode ser hospedado em um S3 bucket por exemplo e colocar uma CDN exatamente como o @wilsonneto-dev disse acima. Pra entender como uma SPA seria hospedada eu fiz um artigo sobre isso a um tempo atras e creio que possa ajudar: https://lucasfsantos.com/posts/deploy-react-angular-cloudfront/.

2. Quando voce desenvolve uma SPA, o seu servidor vai entregar apenas arquivos em JS, HTML, CSS, etc e assim que o browser fizer o download dele ele vai construir e montar o HTML. Veja na imagem abaixo o retorno de um app SPA em react. Basicamente ele renderiza coisas basicas como o<head>, etc e tem um codigo em javascript que assim que o codigo eh executado o browser rapidamente renderiza o HTML. (O processo geralmente è rapido e o usuario final nao percebe isso).

3. Caso voce utilizar o ReactJS puro, a hospedagem pode ser um pouco mais simples mas como a estrutura do site nao vai estar pre renderizada, caso o google faca uma request ele vai ter que "renderizar" javascript para ter o resultado completo do site. Existe uma discussao complexa em torno do assunto pra saber se o crawler do google realmente não renderiza javascript, algumas pessoas dizem que o crawler atual ja renderiza mas o fato è que caso SEO seja critico ninguem arrisca e tambèm pensa que vai ser muito mais rapido ja entregar o html renderizado para o robo do google analisar o resultado.

4. Provavelmente, sua aplicacao vai precisar de um backend, entao voce construiria uma API e consumiria ela no frontend.

5. Utilizando o react SPA voce definiria rotas utilizando o React Router, etc.

NextJS:

1. O NextJs utiliza o react por baixo dos panos mas tem algumas diferencas, porque permite voce desenvolver applicacoes hibridas, voce ja deve ter ouvido termos como SSG, SSR. Vamos primeiro a estrutura basica, O nextJS voce nao precisa de usar react router, a propria estrutura de folders ja define as suas paginas, entao voce coloca todas dentro de pages e ele automaticamente faz o roteamento pra voce. Ele è opinado e te fornece componentes out of the box pra navegar entre paginas, tambem tem components legais pra otimizacao de Imagens como o next/image, voce nao precisa de usar o react-helmet porque ele ja tem um componente chamado next/head, etc.

2. O nextjs precisa de ter um servidor, mas como assim? Lembra que no React o servidor apenas entrega arquivos estaticos como JS, HTML, CSS? No Nextjs a request è processada no servidor. Quando voce acessa por exemplo, seusite.com.br a requisicao vai bater no servidor, vai ser roteada para a pagina correta e o componente vai ser pre renderizado no servidor e ele vai devolver a response. Na foto acima eu mandei um exemplo da response de um site SPA estatico, depois faz o mesmo pra um site hospedado em NextJS e vai ver que a response vai ter toda a estrutura html ja pre renderizada (Vc pode usar alguns servicos como postman ou insominia pra ver o resultado), porque eles nao processam javascript, entao voce consegue ver a response da forma que ela è entregada pelo servidor. Indo mais a fundo todos frameworks de SSR tem um processo que chama hydrate, ou seja, quando voce acessou um site, assim que o site è renderizado no browser, ele precisa de ter eventos, callbacks reassociados ao frontend novamente, caso fique interessado pesquise por hydrate.

3. Outro ponto importante è entender a diferenca de SSR, SSG e como o next implementa isso: A forma que o NextJS vai renderizar/resolver uma request de uma pagina depende do codigo fonte da pagina em si, caso voce exportar uma funcao getServerSideProps no arquivo .js/ts da pagina, ele entende que voce que que aquela pagina seja renderizada no servidor. Provalvelmente voce vai usar essa funcao pra fazer uma chamada em uma API externa, etc. Nesse caso, o SSR seria mais ou menos assim:

• Voce (Client Side/Browser) faz uma request pro site
• Seu servidor em NodeJS hospedando o NextJS recebe a request e processa a getServerSideProps, que chama a sua api externa.
• O nextjs injeta esse objeto retornado como uma prop no seu componente (getServerSideProps) e devolve a response com o componente ja renderizado pelo servidor

O objeto que voce retorna da funcao getServerSideProps vai estar disponivel como uma prop do component default da pagina, e voce pode usar esse valor depois dentro de um effect no client side, etc. Voce tambem ja deve ter ouvido SSG, SSG significa que a sua pagina vai ser gerada estaticamente, ou seja, o next vai fazer o build dela e guardar esse build e apenas retornar ele sempre que fizer a requisicao, coisa parecida que frameworks de JAM Stack como o gatsby fazem. Depois pesquise mais sobre SSG e o next tem uma documentacao muito boa. Esse artigo è bem legal https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation.

3. Outro ponto important è entender como funciona a navegacao. O next tem um component Link que quando voce utiliza, ele faz um client side navigation (entao voce tem a sensacao que o app è uma SPA porque nao tem um full refresh). Vou citar isso mais abaixo, mas basicamente o componente Link do nextjs è inteligente o bastante pra fazer a navegacao do app via client side apenas, e caso essa pagina que voce esta navegando exporta uma funcao getServerSideProps (vimos anteriormente) ele executa uma fetch request no client side para pegar os dados no cliente side - tipo assim: https://seusite.com/_next/data/wF7AaxdABpdwNcSyOeUGo/page/data.json.`, entao os usuarios nao tem aquela sensacao de full refresh , o que è bem similar de SPAs comuns.

Entao voce tem uma pagina que quando um bot do google ou alguem da um full refresh o server ja devolve ela pre renderizado, porem se alguem ja carregou o app e faz uma navegacao ele tambem consegue executar a navegacao no client side e manter a experiencia de uma SPA sem full refresh.

4. Mesmo com essa diferenca na estrutura de paginas, vc pode utilizar funcoes normais como o useEffect/componentDidMount, mas muita gente (inclusive eu) faz confusao e nao entende que hooks nao sao executados no servidor, esse artigo explica bem isso: https://codewithhugo.com/react-useeffect-ssr/. È bem importante entender essa diferenca do que è executado no servidor e o que executa no client.

In the context of useEffect + server-side rendering (SSR), “after the render” is “after we’re done converting the React app into a HTML string”, since we’re not intending to mount our React app. useEffect happens *after* mount/update, but the server doesn’t mount so it doesn’t happen.

Entao vamos supor que voce desenvolva um App em NextJS e faca fetch the data apenas no client side atraves de hooks ou utilizando libs como apollo-client ou react-query, o server renderizaria o "esqueleto" do html e assim que carregar no client a sua api vai fazer uma request pra carregar os dados. Quando vc fizer uma request pra uma pagina que nao tem um SSR, ela vai acontecer de maneira similar ao que aconteceria se voce tivesse uma SPA, o usuario nao vai ver um full refresh na tela.

5. No Nextjs voce utilizaria estruturas como o arquivo _document.js e _app.js caso quiser utilizar Redux, ou outras funcoes que utilizam React Context, como a request è sempre renderizada no sever inicialmente, caso voce queira colocar redux, vc tem que garantir que o context dele vai estar disponivel para todas as paginas, entao voce utilizaria essa estrutura para fazer isso.\

6. Talvez a maior vantagem do Next, na minha opiniao?. O next foi desenvolvido pela vercel, e eles tem um servico de hospedagem muito massa onde voce consegue hospedar aplicacoes em NextJS (* vc tambem pode hospedar aplicacoes em plain react*), dependendo do tamanho, claro, por um valor bem barato, voce consegue inclusive utilizar funcoes serverless ao invez de um servidor NodeJs rodando 24h/7. E voce pode inclusive esses servicos como Netlify e Vercel que voce apenas conecta o seu repositorio e eles fazem o deploy. O mais legal de utilizar esses servicos, e que caso voce precise de uma API Simples, voce pode criar um backend inteiro colocando as suas funcoes dentro de um folder com o nome de api, e automaticamente a sua API ja vai estar pronta para uso em real time. Porem dependendo do tamanho e da arquitetura do seu backend (quais servicos vc usa de banco, etc), essa solucao nao sera taaaaaaao flexivel assim.

Consideracoes Finais

• A impressao que tenho è que o Next, quando voce pega pratica e jeito ele facilita um pouco o desenvolvimento porque è mais opinado na forma de fazer as coisas, ele ja tem bastante starters, o fast refresh dele è insane , etc. O reactJS tambem tem muitos starters otimos como o create-react-app.
• O Next tambem tem inbuilt components e documentacao para otimizar as paginas, fazer code spliting, etc. Coisas que voce tambem consegue fazer no React normal, porem eu sinto que no Next eh mais straightfoward.
• Caso SEO seja um ponto critico, de preferencia ao NextJS.
• A documentacao do Next e a comunidade eh muito boa! Qualquer duvida le a documentacao e entra no grupo do discord que a galera la eh bem helpful!
• O ReactJS puro provavelmente vai ser mais barato porque voce pode hospedar numa CDN e utilizando cache headers corretamente vc pode hospedar aplicacoes pagando bem barato. Falo sobre isso aqui (https://lucasfsantos.com/posts/deploy-react-angular-cloudfront/), porem utilizando servicos como o vercel nao seria nada absurdo de caro dependendo do tamanho da aplicacao.
• Se a aplicacao nao for MUITO grande, voce pode utilizar servicos como vercel e inclusive usar uma CDN o que apesar de nao ser barato como o React voce pode hospedar um app em NextJS por um valor bastante acessivel.
• Caso tiver um backend bem simples, sem muita complexidade e conseguir utilizar a api serverless de um servico igual a netlify ou vercel acredito que agilizaria bastante o desenvolvimento.

Voce consegue resolver o mesmo problema utilizando os dois, tambem leva em consideracao o conhecimento/experiencia que voce tem no momento e utiliza isso pra tomar a sua decisao, mas pelo que voce disse eu acho que utilizar o ReactJS te atenderia perfeitamente, mas caso queira utilizar o NextJS tambem nao seria um problema (a nao ser que voce tenha uma deadline critica e nao tenha tempo pra aprender).

Espero que tenha ajudado, caso tenha duvidas me manda uma mensagem que consigo te mostrar uma arquitetura de webapps feitas em React e Next :)

Abraço!