Buscar

O que é Next.js?

Vamos falar sobre o Next.js, uma tecnologia nova, porém muito poderosa para desenvolvimento web front-end.



Artigo por: Vinícius Medeiros


O que é?


Next é um Framework React para produção criado em 2016 e vem sendo mantido pela Vercel. Nele podemos criar aplicações web com a utilização de componentes igual ao react. O Next promete trazer uma melhor experiência para os desenvolvedores com todos os recursos necessários para agilizar o processo de construção de aplicações.


Quem utiliza?


Na própria documentação podemos ver que empresas como Netflix, GitHub, Twitch, Nubank, Uber, Starbucks optaram por utilizar o Next.


Por que usar?


● Setup Zero Config: Toda configuração é feita pela framework.

● Pré-renderização por página com SSG ou SSR.

● Roteamento dinâmico.

● Grande melhora no SEO.

● Suporte Typescript.

● Construção de aplicações isomórficas.

● Suporte para CSS, SASS e qualquer lib CSS-in-js.


Sem dúvidas uma das grandes novidades do Next é o Server Side Rendering, renderização no lado do servidor, criando assim uma aplicação mais performática. Vamos entender o funcionamento da aplicação com CSR, SSR, SSG e ISG.


Antes de tudo precisamos entender o que é uma CDN, Rede de Entrega de Conteúdo ou CDN é um grupo de servidores geograficamente distribuídos que aceleram a entrega do conteúdo da Web, aproximando-o de onde os usuários estão.


  • CSR - Client Side Rendering

No CSR toda a aplicação é renderizada no lado do cliente, sempre que solicitado, toda renderização é feita pelo navegador. Podemos utilizar o Client Side Rendering no Next, porém é mais comum em projetos React puros.


  • SSR - Server Side Rendering (getServerSideProps)


Server Side Rendering o SSR pode fornecer aos usuários um carregamento mais eficiente da aplicação, já que parte da renderização é feita no servidor. Ou seja, o Next consegue rodar código front-end no lado do servidor.


● Pré-renderizar os dados no momento em que for solicitado.

● O resultado não pode ficar em Cache por uma CDN.

● TTFB (Time to First Byte) é mais lento que SSG.


  • SSG - Static Site Generation (getStaticProps/getStaticPaths)

Static Site Generators o html é gerado no momento de execução e será reutilizado a cada request. O site estático é hospedado no servidor como ele é e, quando requisitado, é enviado para o usuário final. Essa hospedagem precisa de muito menos processador, memória e talvez até mesmo espaço em disco.(Gatsby).

  • Os dados estão disponíveis antes da requisição do usuário.

  • O resultado pode ficar em Cache por um CDN.

  • As páginas precisam estar pré-renderizadas para SEO.

  • Alta performance para renderização das páginas.

  • Não é necessário buscar dados no lado do servidor.


  • ISG - Incremental Static Generation (getStaticProps/getStaticPaths)


A Regeneração Estática Incremental permite que os desenvolvedores usem a geração estática por página, sem a necessidade de reconstruir todo o site. Com o ISR, você pode manter os benefícios da estática enquanto aumenta a escala para milhões de páginas.


  • Os dados estão disponíveis antes da requisição do usuário.

  • O resultado pode ficar em Cache por um CDN.

  • As páginas precisam estar pré-renderizadas para SEO.

  • Alta performance para renderização das páginas.

  • Necessário atualizar dados no lado servidor de tempos em tempos pré-determinados.

Por fim, podemos concluir que mesmo sendo um framework novo, o Next é uma ferramenta bastante poderosa e que veio para melhorar tanto a performance das aplicações como também melhorar a experiência de produtividade do desenvolvedor. Além disso, o Next fornece uma melhoria significativa na questão do SEO, facilitando as ferramentas do Google a encontrar a aplicação.