Strategi Server-Side Data Fetching Berperforma Tinggi Di Next.Js App Router — Part 8

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

app/posts/page.tsx

Tahap 2: Penulisan Kode & Konfigurasi

// type post
type Post = {
    id: number
    title: string
}

// fetch data from API
async function getPosts(): Promise<Post[]> {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    return response.json()
}

export default async function PostsPage() {

    // fetch data
    const posts = await getPosts()

    return (
        <div className="min-h-screen p-4">
            <div className="max-w-4xl mx-auto">
                {/* Header */}
                <div className="text-center mb-10">
                    <h1 className="text-3xl font-bold mb-2">
                        Daftar Post
                    </h1>
                    <p>
                        Menampilkan {posts.slice(0, 5).length} dari {posts.length} post
                    </p>
                </div>

                {/* List Posts */}
                <div className="rounded-lg shadow-md p-6">
                    <ul className="space-y-4">
                        {posts.slice(0, 5).map(post => (
                            <li 
                                key={post.id}
                                className="p-4 border border-gray-400 rounded-lg bg-gray-500 transition-colors"
                            >
                                <div className="flex items-start">
                                    <div className="flex-shrink-0 w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center mr-3 font-semibold">
                                        {post.id}
                                    </div>
                                    <div>
                                        <span className="font-medium">
                                            {post.title}
                                        </span>
                                    </div>
                                </div>
                            </li>
                        ))}
                    </ul>

                    {/* Info */}
                    <div className="mt-8 pt-6 border-t border-gray-100">
                        <p className="text-sm text-gray-500 text-center">
                            Data diambil dari JSONPlaceholder API
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

Tahap 3: Penulisan Kode & Konfigurasi

await fetch('https://jsonplaceholder.typicode.com/posts', {
    cache: 'no-store'
})

Tahap 4: Penulisan Kode & Konfigurasi

await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { revalidate: 60 }
})

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!