Hol a legjobb a backendhez kérdéseket tenni?

A backendhez való kéréseket a legjobb aszinkron módszerekkel végrehajtani a kódban:

1. Az ügyfél oldalon (a böngészőben):

   • Az fetch API vagy egy olyan könyvtár használatával, mint az Axios.
   • Alkalmas az interaktív felhasználói műveletekhez, dinamikus adatok betöltéséhez, űrlapok küldéséhez.
   • Lehetővé teszi SPA (Single Page Application) létrehozását.
   • JavaScript/TypeScript nyelven valósítható meg.

   // fetch példával
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`HTTP hiba! állapot: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Hiba az adatok lekérésekor:', error);
     }
   }
   

2. A szerver oldalon (pl. SSR/SSG keretrendszerekkel):

   • Olyan keretrendszerekben, mint a Next.js vagy Nuxt.js (a React és Vue esetében).
   • Az adatok a build során (SSG) vagy minden kérésnél (SSR) lekérhetők.
   • Javítja a SEO-t és a teljesítményt (kevesebb "fehér képernyő"), mivel az oldal adatokkal renderelődik.
   • Lehetővé teszi a CORS problémák elkerülését.
   • Példák a Next.js-ben: getStaticProps, getServerSideProps.

   // Next.js példával (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, // 404 oldal megjelenítése
       };
     }
   
     return {
       props: { data }, // Az adatok átadása props-ként a oldal komponensének
     };
   }
   

A választás a szükséges interaktivitástól, a SEO igényektől, az alkalmazás típusától (SPA, MPA) és a használt keretrendszertől függ. Gyakran ezeknek az megközelítéseknek a kombinációját alkalmazzák.