Backend'e istekleri nerede yapmak en iyisidir…

Backend isteği yapmak en iyi şekilde kodda asenkron yöntemler kullanılarak yapılır:

İstemci tarafında (tarayıcıda):

fetch API'si veya Axios gibi kütüphaneler kullanılarak.
Kullanıcı etkileşimleri, dinamik veri yükleme, formların gönderilmesi gibi durumlar için uygundur.
SPA (Tek Sayfa Uygulamaları) oluşturmayı sağlar.
JavaScript/TypeScript ile uygulanır.

// fetch ile örnek
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP hatası! Durum: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Veri alınırken hata:', error);
  }
}

Sunucu tarafında (örneğin SSR/SSG frameworkleri kullanırken):

Next.js veya Nuxt.js gibi frameworklerde.
Veriler derleme sırasında (SSG) veya her istek sırasında (SSR) alınabilir.
SEO ve performansı artırır (daha az "beyaz ekran"), çünkü sayfa verilerle birlikte render edilir.
CORS sorunlarından kaçınmayı sağlar.
Next.js'de örnek metodlar: getStaticProps, getServerSideProps.

// Next.js ile örnek (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 sayfasını göster
    };
  }

  return {
    props: { data }, // Verileri sayfa bileşenine props olarak geçir
  };
}

Seçim, gereken etkileşim seviyesine, SEO ihtiyacına, uygulama tipine (SPA, MPA) ve kullanılan framework'e bağlıdır. Bu yaklaşımların kombinasyonu sıklıkla kullanılır.

Backend'e istekleri nerede yapmak en iyisidir?