Wo ist es am besten, Anfragen an das Backend zu stellen?

Anfragen an das Backend sollten am besten mit asynchronen Methoden im Code durchgeführt werden:

1. Auf der Client-Seite (im Browser):

   • Mit der API fetch oder einer Bibliothek wie Axios.
   • Geeignet für interaktive Aktionen des Nutzers, dynamisches Laden von Daten, Absenden von Formularen.
   • Ermöglicht die Erstellung von SPA (Single Page Applications).
   • Wird in JavaScript/TypeScript implementiert.

   // Beispiel mit fetch
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`HTTP-Fehler! Status: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Fehler beim Abrufen der Daten:', error);
     }
   }
   

2. Auf der Serverseite (z.B. bei Verwendung von SSR/SSG-Frameworks):

   • In Frameworks wie Next.js oder Nuxt.js (für React bzw. Vue).
   • Daten können während des Builds (SSG) oder bei jeder Anfrage (SSR) abgerufen werden.
   • Verbessert SEO und Leistung (weniger "leerer Bildschirm"), da die Seite mit Daten gerendert wird.
   • Vermeidet CORS-Probleme.
   • Beispiele für Methoden in Next.js: getStaticProps, getServerSideProps.

   // Beispiel mit 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, // Zeigt 404-Seite an
       };
     }
   
     return {
       props: { data }, // Übergibt Daten als Props an die Seitenkomponente
     };
   }
   

Die Wahl hängt von der erforderlichen Interaktivität, SEO-Bedürfnissen, Art der Anwendung (SPA, MPA) und dem verwendeten Framework ab. Oft werden diese Ansätze kombiniert.