Dove è meglio effettuare le richieste al backend?

Eseguire richieste al backend è meglio farlo utilizzando metodi asincroni nel codice:

1. Sul lato client (nel browser):

   • Utilizzando l'API fetch o una libreria come Axios.
   • Adatto per azioni interattive dell'utente, caricamento dinamico di dati, invio di moduli.
   • Permette di creare SPA (Single Page Applications).
   • Implementato in JavaScript/TypeScript.

   // Esempio con fetch
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`Errore HTTP! stato: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Errore nel recupero dei dati:', error);
     }
   }
   

2. Sul lato server (ad esempio, usando framework con SSR/SSG):

   • In framework come Next.js o Nuxt.js (per React e Vue rispettivamente).
   • I dati possono essere ottenuti durante la compilazione (SSG) o ad ogni richiesta (SSR).
   • Migliora SEO e prestazioni (meno "schermo bianco"), poiché la pagina viene renderizzata con i dati.
   • Permette di evitare problemi di CORS.
   • Esempi di metodi in Next.js: getStaticProps, getServerSideProps.

   // Esempio con 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, // Mostrare pagina 404
       };
     }
   
     return {
       props: { data }, // Passare i dati come props al componente della pagina
     };
   }
   

La scelta dipende dall'interattività richiesta, dalla necessità di SEO, dal tipo di applicazione (SPA, MPA) e dal framework utilizzato. Spesso si utilizza una combinazione di questi approcci.