Skip to main content

Data Fetching

Next.js memiliki data fetching untuk mengambil data dengan beberapa cara yaitu

  • Static Generation (SG)
  • Server Side Rendering (SSR)
  • Client Side Rendering (CSR)

Oke, Mari mulai dari data fetching pertama yaitu Static generation.

Static Generation (SG)​

Pada Static generation, Next.js akan melakukan render sebelum data ditampilkan, proses render ini terjadi pada saat proses build atau lebih dikenal dengan pre-render. keuntungan dari menggunakan static generation ini bisa untuk optimasi SEO(Search Engine Optimation) dan mempercepat proses responses request.

Untuk menggunakan static generation ada dua cara yang pertama dengan menggunakan function getStaticProps dan menggunakan getStaticProps dicombine dengan getStaticPaths

getStaticProps​

untuk menggunakan getStaticProps seperti ini Static Generation

getStaticProps
export default function App({dataList}){
    return (
        <div>
            {
                {
                    dataList.map(list=> (
                        <p>{list}</p>
                    ))
                }
            }
        </div>
    )
}

export async function getStaticProps() {
  const fetchData = await fetch("https://example.com/api/v1/list");
  const response = fetchData.json();

  // mengembalikan sebuah props
  return {
    props: {
      dataList: response,
    },
  };
}

getStaticPaths dan getStaticProps​

Cara kedua ini dengan menggabungkan 2 function yaitu getStaticPaths dan getStaticProps. getStaticPaths ini digunakan untuk membuat path apa saja yang akan dibuat static pagenya. kemudian diteruskan ke getStaticProps untuk melakukan pengisian data ke dalam props component yang akan dirender

static generation

getStaticPaths dan getStaticProps
const dataExample = [
  {
    id: 1,
    name: "John Doe",
  },
  {
    id: 2,
    name: "James G",
  },
  {
    id: 1,
    name: "Angel r",
  },
];

export default function App({ data }) {
  return (
    <div>
      <h3>{data.id}</h3>
      <p>{data.name}</p>
    </div>
  );
}

export async function getStaticPaths() {
  /**
   * ambil semua data list beserta slug
   * kode dibawah bisa diubah dengan melakukan request api
   *
   * */
  const lists = dataExample.map((list) => ({
    params: { id: list.id },
  }));

  return {
    paths: lists,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const fetchData = await fetch(`https://example.com/api/v1/list${params}`);
  const response = fetchData.json();

  // mengembalikan sebuah props
  return {
    props: {
      data: response,
    },
    revalidate: 1, // akan direvalidate setiap 1 detik
  };
}
Revalidate

revalidate pada getStaticProps digunakan untuk memperbarui data pada static page