Menguasai Fetch API di Next.js: Panduan Lengkap untuk Pemula

Next.js, sebagai framework React yang populer, menawarkan berbagai fitur untuk membangun aplikasi web yang modern dan efisien. Salah satu fitur penting yang sering digunakan adalah Fetch API, yang memungkinkan kita untuk mengambil data dari server secara asinkron. Artikel ini akan membahas cara menggunakan Fetch API di Next.js, mulai dari dasar hingga teknik yang lebih lanjut.

Apa Itu Fetch API?

Fetch API adalah antarmuka JavaScript yang menyediakan cara mudah untuk mengambil sumber daya (seperti file atau data) dari server. Ini adalah alternatif modern untuk XMLHttpRequest (XHR) dan menawarkan sintaks yang lebih bersih dan fleksibel menggunakan promise.

Mengapa Menggunakan Fetch API di Next.js?

Next.js memungkinkan kita untuk melakukan fetching data di sisi server (Server-Side Rendering/SSR) atau di sisi klien (Client-Side Rendering/CSR). Menggunakan Fetch API di Next.js memiliki beberapa keuntungan:

• SSR: Memungkinkan pengoptimalan SEO karena konten dapat di-render di server dan diakses oleh mesin pencari.
• CSR: Cocok untuk interaksi dinamis dan pembaruan data yang lebih cepat di sisi klien.
• Fleksibilitas: Mudah digunakan dan diintegrasikan dengan komponen React.

Contoh Penggunaan Fetch API di Next.js

1. Mengambil Data di Server (SSR)

Untuk mengambil data di server, kita dapat menggunakan fungsi getStaticProps atau getServerSideProps. Berikut contoh penggunaan getServerSideProps:

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data dari Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Dalam contoh di atas, kita mengambil data dari endpoint API menggunakan fetch di dalam getServerSideProps. Data kemudian diteruskan sebagai props ke komponen React.

2. Mengambil Data di Klien (CSR)

Untuk mengambil data di klien, kita dapat menggunakan useEffect hook:

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch('https://api.example.com/data');
        const data = await res.json();
        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data dari Klien</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

Pada contoh ini, kita menggunakan useEffect untuk menjalankan fetch saat komponen dimuat. Kita juga menggunakan state untuk melacak status loading, data, dan error.

Tips Optimasi

• Caching: Gunakan caching untuk menyimpan data yang sudah diambil untuk menghindari permintaan berulang ke server.
• Error Handling: Implementasikan penanganan error yang baik untuk menangani kegagalan pengambilan data.
• Loading States: Tampilkan indikator loading saat data sedang diambil.
• Data Transformation: Lakukan transformasi data di server (jika memungkinkan) untuk mengurangi beban di klien.

Kesimpulan

Fetch API adalah alat yang sangat berguna untuk mengambil data di Next.js. Dengan memahami cara menggunakannya di SSR dan CSR, serta menerapkan tips optimasi, Anda dapat membangun aplikasi web yang lebih cepat, lebih andal, dan lebih ramah SEO.