Onde é melhor fazer solicitações ao backend?

Realizar pedidos ao backend é melhor feito usando métodos assíncronos no código:

1. No lado do cliente (no navegador):

   • Usando a API fetch ou uma biblioteca como Axios.
   • Adequado para ações interativas do utilizador, carregamento dinâmico de dados, envio de formulários.
   • Permite criar SPA (Aplicações de Página Única).
   • Implementado em JavaScript/TypeScript.

   // Exemplo com fetch
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`Erro HTTP! estado: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Erro ao buscar dados:', error);
     }
   }
   

2. No lado do servidor (por exemplo, usando frameworks com SSR/SSG):

   • Em frameworks como Next.js ou Nuxt.js (para React e Vue respetivamente).
   • Os dados podem ser obtidos durante a compilação (SSG) ou em cada pedido (SSR).
   • Melhora o SEO e o desempenho (menos "tela branca"), pois a página é renderizada com dados.
   • Permite evitar problemas com CORS.
   • Exemplos de métodos no Next.js: getStaticProps, getServerSideProps.

   // Exemplo com Next.js (getServerSideProps)
   export async function getServerSideProps(context) {
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();
   
     if (!data) {
       return {
         notFound: true, // Mostrar página 404
       };
     }
   
     return {
       props: { data }, // Passar dados como props ao componente da página
     };
   }
   

A escolha depende da interatividade requerida, necessidade de SEO, tipo de aplicação (SPA, MPA) e do framework utilizado. Muitas vezes, uma combinação dessas abordagens é usada.