Waar is het het beste om verzoeken naar de backend te doen?

Het uitvoeren van verzoeken naar de backend is het beste gedaan met behulp van asynchrone methoden in de code:

1. Aan de clientzijde (in de browser):

   • Met behulp van de API fetch of een bibliotheek zoals Axios.
   • Geschikt voor interactieve acties van de gebruiker, dynamisch laden van gegevens, verzenden van formulieren.
   • Maakt het mogelijk om SPA (Single Page Applications) te creëren.
   • Wordt geïmplementeerd in JavaScript/TypeScript.

   // Voorbeeld met fetch
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`HTTP-fout! status: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Fout bij ophalen gegevens:', error);
     }
   }
   

2. Aan de serverzijde (bijvoorbeeld met SSR/SSG frameworks):

   • In frameworks zoals Next.js of Nuxt.js (voor React en Vue respectievelijk).
   • Gegevens kunnen worden verkregen tijdens de build (SSG) of bij elke aanvraag (SSR).
   • Verbeter SEO en prestaties (minder "witte schermen"), omdat de pagina wordt gerenderd met gegevens.
   • Vermijdt problemen met CORS.
   • Voorbeelden van methoden in Next.js: getStaticProps, getServerSideProps.

   // Voorbeeld met 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, // Toon 404-pagina
       };
     }
   
     return {
       props: { data }, // Geef gegevens door als props aan de pagina-component
     };
   }
   

De keuze hangt af van de vereiste interactiviteit, SEO-behoeften, het type applicatie (SPA, MPA) en het gebruikte framework. Vaak wordt een combinatie van deze benaderingen gebruikt.