Kus on kõige parem teha päringuid backendile?

Parim viis backend'ile päringute tegemiseks on kasutada asünkroonseid meetodeid koodis:

1. Kliendi poolel (brauseris):

   • Kasutades fetch API või raamatukogu nagu Axios.
   • Sobib kasutaja interaktiivsuse, dünaamilise andmete laadimise, vormide saatmise jaoks.
   • Võimaldab luua SPA (Single Page Applications).
   • Rakendatakse JavaScript/TypeScriptis.

   // Näide fetch'iga
   async function fetchData() {
     try {
       const response = await fetch('/api/data');
       if (!response.ok) {
         throw new Error(`HTTP viga! Staatus: ${response.status}`);
       }
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Andmete saamise viga:', error);
     }
   }
   

2. Serveri poolel (nt SSR/SSG raamistike kasutamisel):

   • Sellised raamistikud nagu Next.js või Nuxt.js (React ja Vue jaoks).
   • Andmeid saab saada ehitamise ajal (SSG) või iga päringu ajal (SSR).
   • Parandab SEO-d ja jõudlust (vähem "valge ekraani"), kuna leht renderdatakse andmetega.
   • Aitab vältida CORS-i probleeme.
   • Näited Next.js-st: getStaticProps, getServerSideProps.

   // Näide Next.js-st (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 leht
       };
     }
   
     return {
       props: { data }, // andmete edastamine komponendile propsina
     };
   }
   

Valik sõltub nõutavast interaktiivsusest, SEO vajadustest, rakenduse tüübist (SPA, MPA) ja kasutatavast raamistikust. Sageli kasutatakse nende lähenemiste kombinatsiooni.