Consumindo API Fake em seu projeto frontend com Next.js v13

O uso de APIs Fake, também conhecidas como ou APIs falsas, APIs simuladas ou API mock, apresenta diversos benefícios em diferentes cenários de desenvolvimento de software e integração, dentre eles, o desenvolvimento paralelo, onde equipes diferentes podem trabalhar de forma paralela e independente. Os desenvolvedores frontend podem começar a trabalhar na interface de usuário sem esperar que as APIs reais estejam prontas. Isso acelera o desenvolvimento e reduz gargalos.

Um outro benefício ao utilizar as APIs Fake, é que elas permitem que os testes de integração e unidade sejam realizados desde o início do processo de desenvolvimento, mesmo antes das APIs serem implementadas. Isso ajuda a identificar e corrigir problemas mais cedo, economizando tempo e recursos.

O Isolamento de Componentes também pode ser contado como um benefício ao utilizar APIs falsas, você pode isolar componentes do sistema para testá-los individualmente, garantindo que funcionem corretamente antes de integrá-los completamente. Isso facilita a detecção e resolução de problemas.

Redução de Dependências Externas é mais um benefício para evitar depender de APIs externas durante o desenvolvimento inicial, reduz a vulnerabilidade a possíveis instabilidades ou mudanças nas APIs reais. Isso mantém o desenvolvimento fluindo mesmo quando as APIs reais estão em evolução.

Com APIs falsas você pode realizar Simulação de Cenários diferentes, incluindo respostas de erro, latência de rede e situações excepcionais. Isso ajuda a validar como seu sistema lida com diferentes condições, preparando-o para um funcionamento mais robusto no mundo real.

Um outro excelente benefício durante o desenvolvimento e testes iniciais utilizando APIs fake, é a economia de recursos: Você não precisa consumir recursos das APIs reais, o que pode envolver limites de uso, taxas ou outras restrições. Isso ajuda a economizar recursos financeiros e de quota.

Quando falamos em documentação e design de interface utilizando APIs fake, temos o benefício de criar a documentação e o design de interface da API antes mesmo de sua implementação real. Isso ajuda a garantir que a API seja bem projetada, documentada e fácil de usar.

Em resumo, o uso de APIs Fake é uma prática valiosa para acelerar o desenvolvimento, melhorar a qualidade do software e reduzir dependências externas, permitindo que equipes de desenvolvimento trabalhem de forma mais eficiente e eficaz.

A partir disso, basta escolhermos o nosso framework de frontend para iniciar nosso projeto e começar a implantação. Neste artigo, utilizaremos o Next.js versão 13, lançada no dia 25 de outubro de 2022, durante a NextConf 22. Abaixo está o comando para caso você já queira atualizar o seu projeto Next.js que está com uma versão abaixo da versão 13.0.0:

$ npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Principais recursos do Next.js

Otimização do empacotador para JavaScript e TypeScript, o Turbopack

Um dos principais destaques do Next.js 13 é a introdução do Turbopack, que representa a evolução do Webpack e é construído com base na linguagem de programação Rust. Rust, desenvolvida pela Mozilla Research, é reconhecida por sua abordagem multiparadigma e compilação eficiente. Diferentemente de outras linguagens seguras, Rust dispensa o uso de coletor de lixo, sendo projetada para oferecer segurança, concorrência e praticidade. Além disso, Rust possui suporte nativo ao WebAssembly. A Vercel, a empresa por trás do Next.js, argumenta que as soluções fundamentadas em JavaScript atingiram seu auge de desempenho.

Em versões anteriores do Next.js, a Vercel já havia começado a transformação de suas ferramentas internas de JavaScript para aquelas baseadas em Rust. Esse processo teve início com o Babel, resultando em uma transpilação 17 vezes mais rápida. Posteriormente, a ferramenta de minificação também foi migrada, alcançando uma aceleração de desempenho de 6 vezes.

O Turbopack demonstra desempenho excepcional, apresentando as seguintes características:

• Supera o Webpack convencional em até 700 vezes em termos de velocidade.
• É 10 vezes mais ágil que o Vite.
• Inicializa 4 vezes mais rapidamente do que o Webpack.

A notável capacidade do Turbopack se revela de maneira notável em aplicações de grande envergadura. Um exemplo ilustrativo mostra uma comparação entre um aplicativo com 10 mil componentes: enquanto o Vite requer 37.2 segundos para iniciar a aplicação, o Turbopack é capaz de fazê-lo em meros 6.1 segundos. Além disso, o Turbopack agrupa somente os recursos essenciais durante o desenvolvimento.

Atualmente, o Turbopack está disponível somente para o ambiente de desenvolvimento, mas a Vercel está empenhada em expandir esse suporte para o momento da construção (build) do projeto. A versão alpha do Turbopack já pode ser testada, desde que se tenha um projeto que utilize o Next.js 13. Basta executar o comando correspondente.

$ next dev --turbo

Diretório app/

Temos conhecimento de que o NextJS inclui de maneira inerente um sistema de encaminhamento fundamentado nos documentos do seu repositório. Com a versão Next 13, houve aprimoramentos no sistema de encaminhamento e nas estruturas de layout por meio da introdução do diretório app/. As funcionalidades incorporadas englobaram:

Layouts: compartilhe com facilidade a interface, mantendo o estado intacto e evitando reprocessamentos.

Componentes de servidor: estabelecendo o servidor como prioridade padrão para aplicações mais dinâmicas.

Streaming: demonstre instantaneamente estados de carregamento e emita atualizações.

Data fetching: um novo gancho de utilização que viabiliza a obtenção de dados em nível de componente.

Layout

O diretório app simplifica a organização de estruturas de interfaces complexas que mantêm o estado durante a navegação, evitam processamentos excessivos e viabilizam padrões sofisticados de direcionamento. Além disso, agora é possível esboçar disposições visuais por meio do sistema de registros. As disposições visuais compartilham sua interface entre múltiplas páginas. Enquanto se navega, as disposições mantêm o estado, permanecem interativas e não passam por uma renderização adicional.

Componentes do servidor

O diretório app agora oferece suporte a uma nova estrutura de Server Components para o React. Estes componentes do servidor aproveitam as capacidades tanto do servidor quanto do cliente, permitindo a criação de aplicações com desempenho otimizado e interatividade aprimorada, tudo isso através de um único modelo de programação que torna a experiência de desenvolvimento excepcional.

A adoção dos Server Components possibilita a redução da quantidade de código JavaScript enviada ao cliente, resultando em tempos de carregamento inicial das páginas mais velozes.

Ao carregar uma rota, tanto o runtime do NextJS quanto do React serão solicitados, podendo ser armazenados em cache e possuindo um tamanho previsível. O tamanho deste runtime não aumenta conforme o aplicativo cresce. Além desse aspecto, a carga do runtime ocorre de maneira assíncrona, o que permite a melhoria progressiva do HTML do servidor no lado do cliente.

Streaming

O diretório app demonstra a habilidade de gradualmente criar e enviar partes renderizadas da interface do usuário para o destinatário, de maneira incremental. Mediante o uso dos Componentes do Servidor e layouts aninhados no Next.js, é possível de imediato gerar partes da página que não demandam dados específicos, exibindo um estado de carregamento para as áreas que estão buscando informações. Por meio desse enfoque, não é necessário aguardar que a página completa seja carregada antes de poder iniciar a interação com ela.

Data Fetching

Também foi introduzida uma nova abordagem para a obtenção de informações no diretório app. O novo hook de uso substitui as anteriores APIs do Next, como getStaticProps e getServerSideProps.

Agora, existe uma abordagem versátil para adquirir, armazenar em cache e validar dados ao nível do componente. Isso implica que todas as vantagens da Geração de Site Estático (SSG), Renderização do Lado do Servidor (SSR) e Regeneração Estática Incremental (ISR) estão agora disponíveis por meio do hook de uso do React e pela expansão da API de busca da Web, como veremos no exemplo de requisição na integração da API fake com o NextJS.

A habilidade de incorporar a busca de dados dentro de componentes e transmitir menos código JavaScript ao destinatário foram dois retornos fundamentais da comunidade que a equipe da Vercel reportou ter recebido.

Integrando a API fake no Next.js

Agora que já aprendemos um pouco dos principais recursos do NextJS 13, vamos criar nossa estrutura para rodar ao mesmo tempo no nosso frontend, um serviço de frontend e um serviço de backend, este último servindo nossa API fake.

Para utilizar a API Fake, vamos utilizar o pacote json-server. Para isto, você pode instalá-lo utilizando o comando abaixo:

$ npm i json-server

Após isso, basta adicionarmos um comando em nosso package.json que fica na raiz do projeto, que rodará nossa API fake.

• port 8000 está indicando a porta que a API fake rodará.
• watch @fakeapis/index.js está indicando o diretório e o arquivo que ele estará olhando para executar o servidor da API fake.
  

Feito isso, criamos uma pasta na raiz chamada @fakeapis que conterá nossos arquivos json representando nossa API fake. Na Figura 1 você pode ver que há o arquivo index.js o qual constrói nossa API fake e chama os arquivos que representam a API.

O arquivo index.js que constrói estas duas APIs Fake, a feeds.json e a trainings.json pode ser feito com o código abaixo:

Agora, basta colocarmos para rodar nossa API Fake que o json-server irá mostrar os arquivos json que ele está disponibilizando como API na porta 8000, como você pode ver na Figura 2.

Se você chamar uma das URLs listadas no Resources que o servidor da API fake disponibilizou, você verá o resultado em formato json, como você pode ver na Figura 3.

Agora que já conseguimos visualizar o resultado da API fake, podemos no nosso frontend, criar um componente utilizando a biblioteca SWR que o próprio Next.js indica para chamarmos nossa API e começarmos a manipulação dos dados.

Conclusão

Espero que tenha curtido a implementação da API Fake e seus benefícios, de fato, ela nos ajuda muito no desenvolvimento, na velocidade, nos testes sem interrupções ou problemas de conexão com Internet ou servidor, além de nos fornecer subsídio para ajudar o pessoal do backend também com melhorias da própria API quando a mesma não está com uma estrutura tão boa para o frontend manipular.