Nextjs 13 telah meniadakan getserversideprops. sekarang kita bisa dengan mudah memanggil data hanya dari komponen menggunakan sebuah file export function asyncronous.

Metode Data Fetching di Next.js 13

Berikut adalah metode yang dapat Kita gunakan untuk data fetching dalam proyek Next.js 13:

async function getData() {
  let users = await fetch('http://localhost:3000/api/users-prisma',{
    method:'get',
    headers:{
      'Content-Type':'application/json'
    }
  });

  let resp=await users.json();
  return resp;
}

export default async function PageUsers() {
   const data=await getData()
   return(
      <p>{JSON.stringnify(data)}</p>
    )
}

Sepeti kta lihat contoh diatas kita membuat sebuah function asyncronous yaitu getData() untuk fetching data dan datanya kita lempar kedalam sebuah function dalam komponent tersebut.

Atau kita juga bisa langsung memanggil sebuah database dengan menggunakan prisma, Seperti contoh dibawah ini:

async function getDataWithPrisma() {
  let users = await prisma.user.findMany();
  return users;
}

Pada nextjs sebelumnya yaitu sebelum nextjs 13, kita harus membuat sebuah props pada sebuah function getServerSideProps atau getStaticProps yang akan mengirim props ke halaman page komponent tersebut, Tapi dengan adanya data fetching di nextjs13 maka kita lebih ringkas dan lebih leluasa dalam memanggil dan mmengelola data