Porque é que o React passou a recomendar o uso do NextJs para a criação de novos projectos?

Arley Bebe — Mon, 02 Oct 2023 19:35:54 +0000

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.

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.

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:

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
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 “/”.
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”.
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.
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.
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.

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.

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.

DEV Community: Arley Bebe