Code With Thorr

Data Fetching di Next.js App Router

Thariq 'Audah's photo
Thariq 'Audah
·

2 min read

Next.js App Router memiliki mekanisme data fetching yang berbeda dengan versi sebelumya. Pada artikel kali ini kita akan coba sedikit membahasnya.

Fetching data pada server component

Pada Next.js 13, kita diperkenalkan dengan konsep server component sebagai komponen default ketika kita men-define component baru di aplikasi Next.js kita. Server component adalah component yang akan di render di server sebelum dikirim ke client side (browser).

Data fetching di server component terlihat sangat natural dan simpel. Kita bisa langsung memanggil async function ke API atau database. Dan boom, fetching data selesai!

async function getPosts() {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await data.json();
    return posts;
}

export default async function Posts() {
    const posts = await getPosts();

    return (
        <main>
            <div className='container'>
                {posts.map((post) => (
                    <p>{post.title}</p>
                ))}
            </div>
        </main>
    );
}

Ini artinya, aplikasi kita akan melakukan fetching data di server, mendapatkan data, me-render nya, dan mengirimnya ke client berupa static content. Keren kan!

Caching data

Saat kita melakukan fethcing data, Next.js akan melakukan caching di server sehingga kita tidak perlu melakukan re-fetch setiap kali melakukan request. Ini akan menguntungkan karena halaman kita akan lebih cepat secara performa.

Namun, jika kita mengelola halaman dengan konten yang dinamis dan berubah-ubah setiap waktu, ini akan menimbulkan masalah. Sehingga kita perlu melakukan pembaharuan konten secara dinamis. Konsep ini disebut revalidation. Ada 2 cara untuk melakukan revalidation data:

  • Time-based revalidation: Melakukan re-fetching data dalam periode waktu tertentu. Ini dapat dilakukan dengan menambahkan parameter next.revalidate di dalam fungsi fetch.
const data = await fetch('https://jsonplaceholder.typicode.com/posts', {
        next: {
            revalidate: 10, // revalidate every 10 seconds
        },
    });

Kita juga dapat menghilangkan caching ini dengan menambahkan parameter next.cache: 'no-store' di dalam fungsi fetch.

  • On-demand revalidation: Revalidation data yang dilakukan sesuai permintaan (on demand) dengan fungsi revalidatePath atau revalidateTag.

Sekian pembahasan kita mengenai data fetching dan caching di dalam Next.js sever component. Semoga ada sedikit pelajaran yang bisa dicerna. Have fun with your code :)

Next.js