Introdução

Next.js é um framework React para produção, ele é construído sobre o React. Veremos mais sobre como o Next.js funciona e como podemos utilizá-lo para criar aplicações web modernas e performáticas.

Ele é otimizado para performance, contendo renderização server-side e geração estática de páginas, além de outras funcionalidades que veremos ao longo do guia.

O que é?

Next.js é um framework full-stack para React, permitindo o desenvolvimento de aplicações tanto do lado do cliente (client-side) quanto do lado do servidor (server-side). Ele se destaca por sua abordagem híbrida de renderização, oferecendo suporte para Server-Side Rendering (SSR) e Static Site Generation (SSG). Com isso, os desenvolvedores podem escolher a melhor estratégia para cada página, otimizando o carregamento e a experiência do usuário.

Além disso, Next.js traz benefícios como roteamento automático baseado em arquivos, suporte a API Routes para construção de backends leves e integração simplificada com diversas ferramentas do ecossistema.

Renderização Server Side - SSR

O Server-Side Rendering (SSR) é uma das principais funcionalidades do Next.js e permite que as páginas sejam renderizadas no servidor antes de serem enviadas ao navegador do usuário. Isso melhora o SEO, pois os motores de busca conseguem indexar o conteúdo da página mais facilmente. Além disso, o SSR reduz o tempo de carregamento inicial, pois o usuário recebe uma página já processada pelo servidor.

Imagine que páginas de lado servidor são devolvidas ao navegador já com o HTML gerado, enquanto páginas de lado cliente são devolvidas ao navegador com um esqueleto HTML que é preenchido com JavaScript.

Esse tipo de tratamento é essencial para a otimização de páginas web, permitindo que o servidor faça o processamento pesado e entregue ao cliente apenas o que é necessário para a renderização da página. O Next oferece suporte a essa funcionalidade de forma nativa, facilitando a implementação de SSR em nossos projetos, entretanto, caso seja necessária a criação de um componente ou página específica que seja client-side, é possivel fazer isso de forma simples e eficiente, veja abaixo: