Gdzie najlepiej wykonywać zapytania do backendu…

Wykonywanie zapytań do backendu jest najlepiej wykonywać za pomocą metod asynchronicznych w kodzie:

Po stronie klienta (w przeglądarce):

Z użyciem API fetch lub biblioteki takiej jak Axios.
Odpowiednie do interaktywnych działań użytkownika, dynamicznego ładowania danych, wysyłania formularzy.
Pozwala na tworzenie SPA (Single Page Applications).
Implementowane w JavaScript/TypeScript.

// Przykład z fetch
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`Błąd HTTP! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Błąd podczas pobierania danych:', error);
  }
}

Po stronie serwera (np. przy użyciu frameworków SSR/SSG):

W frameworkach takich jak Next.js lub Nuxt.js (dla React i Vue odpowiednio).
Dane mogą być pobierane podczas kompilacji (SSG) lub przy każdym żądaniu (SSR).
Poprawia SEO i wydajność (mniej "białego ekranu"), ponieważ strona jest renderowana z danymi.
Pozwala uniknąć problemów z CORS.
Przykłady metod w Next.js: getStaticProps, getServerSideProps.

// Przykład z 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, // Wyświetli stronę 404
    };
  }

  return {
    props: { data }, // Przekazuje dane jako props do komponentu strony
  };
}

Wybór zależy od wymaganego poziomu interaktywności, potrzeb SEO, typu aplikacji (SPA, MPA) i używanego frameworka. Często stosuje się kombinację tych podejść.

Gdzie najlepiej wykonywać zapytania do backendu?