ReactJS vs NextJS
Client-side and Server-side rendering
Com a evolução da tecnologia, criar e desenvolver um projeto passou a causar menos sofrimento. Embora este avanço da web tenha disponibilizado inúmeras tecnologias, é importante saber quais as melhores a utilizar, dependendo do caso.
Atualmente, o Javascript é uma das principais linguagens no mundo da programação. Com o crescimento desta linguagem surgiram várias frameworks e bibliotecas da mesma, nomeadamente o ReactJS e o NextJS.
Neste artigo irei focar-me nestas duas tecnologias, ReactJS e NextJS, e identificar as suas principais diferenças percebendo qual a melhor a utilizar dependendo do projeto que queremos de desenvolver.
Qual a diferença entre uma biblioteca e uma framework?
É importante salientar que embora sejam faladas com se fossem a mesma coisa, uma biblioteca e uma framework não têm a mesma definição. Embora ambas peguem em código já escrito por outro desenvolvedor e o reutilizem, estas apresentam algumas diferenças. Segundo Khemis (2019), a melhor forma de explicar a diferença entre estes dois conceitos é através da metáfora de uma casa.
A library is like building your home from scratch, you have the choice to make your house as you wish, with any architecture you like, you can sort your rooms in the way you like.
On the other hand, Framework is like buying a new house, you don’t have to deal with building problems, but you can’t choose how to sort your rooms because the house is already built. ( Khemis, 2019)
No fundo, a grande diferença é notável quando se observa o fluxo da nossa aplicação. Ao utilizar uma biblioteca, somos nós os responsáveis, chamando a biblioteca apenas quando e onde queremos. Numa framework, é a mesma que se responsabiliza por este fluxo, disponibilizando lugares apropriados para interligar o código desenvolvido por nós e chamando-o apenas quando necessário.
O que é o ReactJS?
O ReactJS é uma biblioteca de Javascript criada pelo Facebook em 2013. Esta foi desenvolvida com o objetivo de facilitar a criação de componentes para aplicações web e atualmente é uma das bibliotecas mais utilizadas por desenvolvedores. Ao ser baseada numa linguagem já dominada no mundo da tecnologia, esta biblioteca entre outros pontos positivos, é bastante fácil de aprender.
Vantagens:
- Boa documentação: Apresenta uma documentação bastante completa e disponibiliza tutoriais.
- Facilidade em escrever código: Por se basear em Javascript, uma linguagem familiar, torna-se possível criar aplicações em menos tempo, utilizando menos código.
- Componentes reutilizáveis: Permite o uso de componentes em diferentes páginas sem que estes sejam alterados. Caso seja necessário alterar o código do componente, este tornar-se-á visível em todas as páginas, poupando tempo ao desenvolvedor.
- Grande comunidade: Por ser uma das tecnologias mais utilizadas, existe uma grande variedade de recursos disponibilizados pelos seus utilizadores.
- Preparada para o SEO: Facilita a navegação por vários mecanismos de pesquisa, evitando assim que existam problemas ao ler uma aplicação pesada. Permite que a aplicação seja executada no servidor e renderizada no DOM, retornando uma página web normal.
Desvantagens:
- Documentação desatualizada: Embora apresente uma documentação explícita e de fácil entendimento, esta rapidamente se torna desatualizada por existirem atualizações recorrentes na biblioteca. Isto exige que haja uma constante reaprendizagem das suas funcionalidades.
- Demasiado simples: Por cobrir e se especializar apenas nas interfaces do utilizador, é necessário utilizar outras tecnologias que reunam todas as ferramentas necessárias para o desenvolvimento de um projeto.
O que é o NextJS?
O NextJS é uma framework de React que permite o desenvolvimento de páginas únicas de Javascript. Esta foi lançada em 2015 pela Vercel com o objetivo de se tornar num kit de desenvolvimento de software web que incluísse todas as ferramentas necessárias para desenvolver uma aplicação.
Vantagens:
- Grande velocidade: Isto deve-se à criação de sites estáticos e ao facto de a renderização ser realizada no lado do servidor.
- Facilidade em escrever código: Requer menos código em comparação com o próprio React. Isto permite uma maior gestão e legibilidade do projeto.
- Rápida renderização: Deve-se ao facto dos componentes serem renderizados no local, sendo possível observar imediatamente as alterações ao atualizar uma página.
- SEO: Disponibiliza o componente <Head> de forma a permitir a criação de keywords e títulos sendo apenas necessário colocá-lo em cada página.
- Utilização de APIs: Permite uma fácil ligação com APIs externas, permitindo a criação das nossas próprias rotas de APIs.
- Fácil implementação e customização: Por utilizar plugins como Babel e conter CSS integrado, torna-se fácil a implementação do design que queremos adoptar.
Desvantagens:
- Roteamento: As rotas no Next baseiam-se num sistema de arquivos. Para a criação de alguns projetos isto pode insuficiente, sendo necessário a criação de rotas dinâmicas através do Node.js.
- Comunidade: Embora não seja necessariamente uma desvantagem, em comparação com a comunidade de React, a de Next é muito mais pequena. Isto faz com que não haja tantos recursos disponíveis de apoio à sua utilização.
ReactJS vs NextJS
Após analisarmos as vantagens e desvantagens de cada uma destas tecnologias, é importante fazer uma comparação de alguns pontos principais: custos de desenvolvimento, recursos e renderização.
- Custos de desenvolvimento: Quando se fala de custos de desenvolvimento de um projeto, podemos dizer que o React e o Next se encontram empatados. Ambas são tecnologias de código gratuito, o que permite que sejam desenvolvidas aplicações a partir das mesmas sem grandes custos.
- Recursos: Como referido anteriormente, o Next é visto como um kit completo de desenvolvimento, o que facilita todo o processo de criação de um projeto. Embora o React tenha uma composição um pouco mais simples, é facilmente personalizado e extensível, sendo possível incluir inúmeros recursos.
- Renderização: Este ponto talvez seja o mais importante quando se trata do momento de escolha de qual destas duas tecnologias utilizar. O React e o Next utilizam formas diferentes de renderização, nomeadamente, o client-side rendering e o server-side rendering.
Client-side and server-side rendering
O client-side rendering, utilizado pelo React, acontece quando o conteúdo do navegador é renderizado através de Javascript. Isto faz com que o carregamento inicial da página seja lento mas que o carregamento das sub-páginas seja bastante rápido. Desta forma, em vez de ser carregado por completo um ficheiro de HTML, é recebido um ficheiro simples de HTML com um arquivo de Javascript (Figura 2). Assim, cada vez que algum dado é alterado na interface do utilizador, este apenas renderiza esse elemento específico, evitando que seja tudo novamente carregado.
Esta renderização é aconselhada em aplicações que possuam uma interface do utilizador bastante complexa e com muitas páginas (Ex: Facebook) pois, não será necessário carregar todo o conteúdo cada vez que é realizada uma alteração mesmo que o carregamento inicial possa ser um pouco mais demorado.
O server-side rendering, utilizado pelo Next, ocorre quando é feita uma solicitação por parte do utilizador a uma página web e é preparada uma página HTML com todos os dados necessários e enviada para o utilizador através da Internet. Ao receber esta página, o navegador interpreta o seu conteúdo e apresenta a página (Figura 3). Este processo é realizado em milissegundos mas quando ocorre demasiadas vezes, este consome largura de banda desnecessária e aumenta de forma significativa a carga no servidor.
Esta renderização é normalmente adoptada em aplicações que contenham uma interface do utilizador bastante simples e composta por poucas páginas e poucos dados dinâmicos (Ex: Invison) onde o carregamento inicial da página é muito mais rápido.
Conclusão
Ambas as tecnologias exploradas neste artigo apresentam pontos positivos e negativos quanto à sua utilização. No mundo atual, embora estas ferramentas sejam consideradas acessíveis e de fácil implementação, na hora de escolher, não só contam os fatores técnicos mas também com qual destas tecnologias as respetivas equipas se encontram mais habilitadas para utilizar.
Por um lado temos o React, que nos permite construir as coisas do forma que queremos e por outro o Next que nos disponibiliza ferramentas já prontas a utilizar.
Espero que com este artigo tenhas ficado um pouco mais esclarecido quanto a estas duas tecnologias que se encontram em alta no mercado e as melhores alturas para as utilizar.
Algumas recomendações de leitura 😊:
Referências
- Adhikary, Y. (2020, april 6). Client Side Rendering Vs Server Side Rendering in React js & Next js. Medium. https://yudhajitadhikary.medium.com/client-side-rendering-vs-server-side-rendering-in-react-js-next-js-b74b909c7c51
- Gamela, A., Rebelo, G. (2021, december 23). Next.js vs React: What are the differences?. ImaginaryCloud. https://www.imaginarycloud.com/blog/next-js-vs-react/#WhatisReact
- Malagi, S. (s/d). Server-Side Rendering VS. Client-Side Rendering. Clarion Technologies. https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering
- Khemis, S. (2019, december 16). What is the Difference Between a Framework and Library?. Medium. https://sofienebk.medium.com/what-is-the-difference-between-a-framework-and-library-2b712a1a1c41
- Krajewski, R. (2021, may 4). Next.js vs React: Which Framework is Better For your Front-end?. Ideamotive. https://www.ideamotive.co/blog/nextjs-vs-react-which-javascript-framework-is-better-for-your-front-end
