Porque é que o React passou a recomendar o uso do NextJs para a criação de novos projectos?
Tags: nextjs, react, javascript, frontend
Published: 2023-10-02 19:35:54

Já se sabe que a documentação da última versão do React recomenda o uso de frameworks ( NextJS, Remix, Gatsby e Expo para mobile ) desde o principio para a criação de novos projectos, no entanto, no seio da comunidade é normal que surjam questões sobre o que realmente esses frameworks vêm resolver e o porquê das mesmas terem passado de opcionais como anteriormente se apresentavam, à recomendadas, e a resposta para esse fenomeno é a seguinte:

Esses frameworks transformaram-se de simples ferramentas de resolução de problemas especificos para plataformas indispensaveis, através de suas metodologias opinadas em relação a aspectos de como uma aplicação deve estar estruturada, bem como algumas funcionalidades avançadas e recomendadas, garantindo assim qualidade, flexibilidade, produtividade e desempenho dos projectos desenvolvidos.

Para o caso do NextJS concretamente, que teria surgido inicialmente como solução para resolver problemas como renderização do lado do servidor, temos hoje um NextJS resolvendo praticamente um leque de questões-chave, relevantes quando se trata de desenvolvimento Frontend, vamos ver alguns deles a fundo:

## **1. Renderização no Servidor SSR e no Cliente CSR:**
O Next.js suporta tanto a renderização da interface no servidor quanto a renderização no cliente (SSR e CSR), permitindo uma experiência de usuário rápida e otimizada para mecanismos de busca, mas como isso funciona detalhadamente:

Num exemplo básico e simplificado para abrir a mente, imagine um cenário para a renderização no servidor (SSR) como se alguém montasse o quebra-cabeça de uma paisagem para você antes de o entregar. Ou seja, antes de mostrar a imagem bonita da paisagem na sua frente, alguém já encaixou todas as peças e montou o quebra-cabeça por você.

Na prática, quando você acessa uma página da web que usa SSR, o servidor já montou a página inteira antes de mostrar para você. Ele pega todas as partes da página, coloca tudo junto e entrega a página pronta e bonita para o seu navegador.

Agora, vamos imaginar que você mesmo está montando o quebra-cabeça da paisagem. Você tem todas as peças e vai colocando uma por uma no lugar certo até a imagem final aparecer.

Com a renderização no cliente (CSR), o servidor só entrega para o seu navegador as peças separadas do quebra-cabeça. Então, é o seu navegador que precisa montar tudo e mostrar a página completa. Ele pega as peças (ou seja, os pedaços de código) e as encaixa juntas para você ver a página bonita.

a) Basicamente, o fluxo do Server-Side Rendering (SSR) no Next.js funciona assim:

- Quando um usuário solicita uma página da web, o servidor Next.js recebe a solicitação.

- O servidor processa a solicitação e gera o HTML completo da página no momento em que a solicitação é feita. Isso pode envolver buscar dados do banco de dados ou de APIs externas.

- Após gerar o HTML, o servidor envia a página HTML completa para o navegador do usuário.

- O navegador recebe o HTML e o exibe imediatamente, permitindo que o usuário veja o conteúdo enquanto os scripts JavaScript e estilos são carregados.

- Uma vez que o JavaScript e os estilos são carregados, o Next.js converte a página em um aplicativo React totalmente funcional, permitindo a interação do usuário com a página sem recarregar completamente a página.

![SSR Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gql6ty4vxjnk7y9yrdsk.png)
Image from Krusche Company

O SSR é ótimo para SEO (otimização de mecanismos de busca) porque os mecanismos de busca podem ver o conteúdo da página diretamente no HTML. Também é útil para melhorar o desempenho percebido pelo usuário, já que o conteúdo é exibido rapidamente evitando aquela sensação de construção, tal como acontece em ambientes com por exemplo condições de rede fracas.

b) De igual forma, o fluxo do Client-Side Rendering (CSR) no Next.js funciona assim:

- Quando o usuário solicita uma página, o servidor Next.js envia um HTML básico para o navegador, juntamente com os scripts JavaScript necessários.

- O navegador recebe o HTML e começa a renderização, mas a maior parte do conteúdo é gerada pelo JavaScript no lado do cliente.

- O JavaScript faz solicitações de dados adicionais (por exemplo, para APIs) e, após receber os dados, ele atualiza a página no navegador com o conteúdo real.

- A partir desse ponto, a interação do usuário é tratada principalmente pelo JavaScript no navegador, sem recarregar a página completa.


![csr rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arfgie4ie3tyoftnkh1w.png)
Image from Krusche Company

O CSR é excelente para aplicativos que exigem interatividade rápida e não dependem muito do SEO. É especialmente útil para aplicativos de uma única página (SPA) que carregam uma vez e, em seguida, atualizam o conteúdo dinamicamente sem recarregar a página.

## **2. Geração Estática (Static Site Generation — SSG):**
Está relacionada ao Server-Side Rendering (SSR), mas com uma abordagem um pouco diferente. Ela cria páginas estáticas a partir de dados dinâmicos antes mesmo de serem solicitadas por um usuário. Deixa explicar como funciona:

- Quando você usa SSG, o processo de criação das páginas da web acontece antes de os usuários acessarem o site. Isso significa que, em vez de gerar a página toda vez que alguém faz uma solicitação, o site é gerado antecipadamente e os resultados são armazenados como arquivos estáticos.

- Os dados que você deseja exibir nas páginas são buscados de fontes como bases de dados, APIs ou sistemas externos durante uma fase de construção do site, geralmente durante a compilação ou implantação do aplicativo.

- Depois que os dados são obtidos, o aplicativo cria páginas HTML completas para cada URL que você deseja pré-renderizar. Cada página é gerada como um arquivo estático.

- Quando um usuário acessa uma dessas páginas, o servidor entrega o arquivo estático correspondente, que já contém o HTML completo e todos os recursos necessários, como JavaScript e CSS.

- Isso resulta em uma experiência de carregamento super rápido para os usuários, porque as páginas estão prontas para serem exibidas imediatamente, sem atrasos na geração de conteúdo no servidor.

A pré-renderização (SSG) é especialmente útil para sites que têm conteúdo que não muda frequentemente, como blogs, sites de comércio eletrônico com produtos estáticos e páginas informativas. 
Ela combina a eficiência de páginas estáticas com a capacidade de oferecer conteúdo dinâmico quando necessário, tornando-a uma técnica poderosa para criar sites rápidos e eficazes.

## **3. Roteamento Baseado em Sistemas de Arquivos (File System Routing):**
O sistema de roteamento baseado em sistema de arquivos do Next.js é uma abordagem de roteamento simplificada e intuitiva que utiliza a estrutura de pastas e nomes de arquivos para definir as rotas de um aplicativo web. Aqui estão os principais princípios de funcionamento:

1. Pasta “pages”: O ponto central desse sistema é a pasta chamada “pages” no diretório raiz do projeto Next.js. É dentro dessa pasta que você cria os arquivos que representam as diferentes rotas do seu aplicativo. NB: Para a última versão do NextJS a pasta pages pode ser substituida por app, que continua recebendo as rotas e adiciona outros ficheiros como layouts

2. Nome dos arquivos: O nome de cada arquivo na pasta “pages” determina a rota correspondente no seu aplicativo web. Por exemplo, um arquivo chamado “index.js” na pasta “pages” corresponde à página inicial do seu aplicativo e será acessível em “/”.

3. Subpastas: Você pode criar subpastas dentro da pasta “pages” para organizar as rotas do seu aplicativo. As subpastas também determinam a estrutura da URL. Por exemplo, se você criar uma pasta “blog” e nela um arquivo “post.js”, a rota correspondente será “/blog/post”.

4. Roteamento automático: O Next.js cuida automaticamente do roteamento com base na estrutura de pastas e nomes de arquivos. Você não precisa configurar rotas manualmente em um arquivo de configuração. Isso simplifica o desenvolvimento e a manutenção do aplicativo.

5. Parâmetros dinâmicos: Você pode criar rotas com parâmetros dinâmicos usando parenteses retos[ ] nos nomes dos arquivos. Por exemplo, um arquivo chamado "[id].js" pode corresponder a rotas como "/produto/123" ou "/produto/456", onde "123" e "456" são valores dinâmicos.

6. Página 404: Para lidar com páginas não encontradas (erro 404), você pode criar um arquivo chamado “404.js” na pasta “pages”. Ele será exibido quando alguém tentar acessar uma rota que não existe.


![file system routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rjvbyghiq238l0ufzit.jpg)
Image from Next.JS Blog

Em resumo, o sistema de roteamento baseado em sistema de arquivos do Next.js torna a definição e organização de rotas em um aplicativo web simples e intuitiva, aproveitando a estrutura de pastas e nomes de arquivos para criar as rotas automaticamente. Isso elimina a necessidade de configurações complicadas de roteamento e facilita o desenvolvimento de aplicativos web com o Next.js.

## **4. Carregamento Otimizado de Imagens, fontes e scripts:**
O Next.js oferece otimizações para imagens, fontes e scripts, a fim de melhorar a experiência do usuário, vamos explicar como isso acontece:

**1. Otimização de Imagens:**
Carregamento Lento (Lazy Loading):

O Next.js configura automaticamente o carregamento lento (lazy loading) para imagens usando o componente next/image. Isso significa que as imagens são carregadas apenas quando ficam visíveis na janela do navegador. Isso melhora o desempenho da página, reduz a largura de banda utilizada e acelera o tempo de carregamento.

`import Image from 'next/image';`

// Exemplo de uso com carregamento lento
`<Image src="/path/to/image.jpg" alt="Descrição da imagem" width={500} height={300} />`

Tamanhos e Formatos Otimizados:

O Next.js realiza a otimização automática de tamanhos e formatos de imagem. Durante o processo de construção, ele gera várias versões das imagens com diferentes tamanhos e formatos. O navegador escolhe a versão mais adequada com base no dispositivo do usuário, economizando largura de banda e melhorando o desempenho.

Imagens Responsivas:

O componente next/image oferece suporte a imagens responsivas. Você pode especificar width e height para as imagens, mas o Next.js também gera imagens responsivas semelhantes ao atributo srcset do HTML. Isso permite que o Next.js selecione a imagem adequada com base no tamanho da tela do dispositivo.

**2. Otimização de Fontes:**
O Next.js permite otimização do carregamento de fontes e isso acontece da seguinte forma:

Pré-carregamento de Fontes Críticas:

Você pode usar o atributo rel="preload" em links de fontes críticas para pré-carregá-las. Isso garante que as fontes estejam prontas para uso assim que forem necessárias, melhorando a renderização da página.

`<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">`

Carregamento Assíncrono:

O Next.js facilita o carregamento assíncrono de fontes usando o atributo rel="stylesheet" em links de folhas de estilo. Isso permite que o navegador carregue as fontes em segundo plano, sem bloquear o carregamento da página.

`<link rel="stylesheet" href="/path/to/fonts.css" media="print" onload="this.media='all'">`

**3. Otimização de Scripts:**

Carregamento Assíncrono de Scripts:

O Next.js permite carregar scripts de maneira assíncrona, o que significa que eles não bloqueiam o carregamento da página. Você pode usar o atributo async em tags `<script>` para alcançar isso.

<script async src="/path/to/script.js"></script>

Divisão de Código (Code Splitting):

O Next.js utiliza a divisão de código (code splitting) para carregar apenas os scripts necessários para uma página específica. Isso reduz o tamanho inicial da carga e acelera o carregamento da página. O Next.js faz isso automaticamente.

## **4. Suporte nativo ao TypeScript**

O Next.js possui suporte nativo ao TypeScript, que torna o desenvolvimento de software mais seguro, legível e eficiente, detectando erros de tipagem em tempo de compilação e melhorando a documentação e a manutenção do código, mas sobre o Typescript, vamos falar em outro artigo.

## **5. Suporte nativo a estilizações CSS**

Next.js oferece suporte a diferentes maneiras de estilizar seu aplicativo, incluindo:

- CSS Global : Simples de usar e familiar para quem tem experiência com CSS tradicional, mas pode levar a pacotes CSS maiores e dificuldade de gerenciar estilos à medida que o aplicativo cresce.

- Módulos CSS : Crie classes CSS com escopo local para evitar conflitos de nomenclatura e melhorar a capacidade de manutenção.

- Tailwind CSS : uma estrutura CSS utilitária que permite designs personalizados rápidos compondo classes utilitárias.

- Sass : um pré-processador CSS popular que estende CSS com recursos como variáveis, regras aninhadas e mixins.

- CSS-in-JS : incorpore CSS diretamente em seus componentes JavaScript, permitindo estilos dinâmicos e com escopo definido.

## **Conclusão:**
O Next.js, se tornou uma escolha recomendada porque aborda uma variedade de desafios comuns no desenvolvimento frontend, fornecendo uma solução completa e eficaz capaz de ajudar os desenvolvedores a criar projectos web de alta qualidade, flexíveis, rápidos e otimizados para mecanismos de busca, tornando-o uma escolha natural para projetos React.