Implementasi Fetch API dalam pengembangan Backend Website Daftar Film dengan Next.JS

Abstract

Penelitian ini bertujuan untuk meningkatkan performa website daftar film dengan menerapkan framework Next.JS dan Fetching API milik Next.JS, yang mengatasi tantangan efektivitas dalam pencarian dan relevansi informasi yang akurat dan terkini bagi pengguna. Banyaknya data yang tidak relevan dan kurang update pada situs film menyulitkan pengguna dalam mencari informasi-informasi terkini seputar film yang mereka cari. Penelitian ini mengembangkan aplikasi dengan Next.JS dilengkapi dengan Fetch API untuk mengambil data yang dinamis dengan menggunakan Server-Side Rendering (SSR) dan Static Site Generation (SSG) untuk meningkatkan komunikasi antara server dengan klien, memberikan pengalaman responsif dan SEO-friendly bagi pengguna. Dari hasil pengujian menggunakan Lighthouse dan Chrome Devtools menunjukkan peningkatan performa dengan skor aplikasi di 92 pada platform Vercel dan 82 untuk sisi Lokal. Optimalisasi cache di Vercel juga mengurangi ukuran transfer data nya dari 2,2 MB menjadi 0,27 MB, yang di mana mempercepat waktu load dan membuat aplikasi menjadi lebih stabil. Hasil ini merepresentasikan bahwa aplikasi yang dikembangkan berhasil menampilkan informasi terkini dan relevan dengan kecepatan yang tinggi dan performa yang stabil. Namun, penelitian ini memiliki keterbatasan dalam cakupan perangkat pengujian serta fokus platform hosting yang terbatas di Vercel.

accurate and up-to-date information for users. The amount of outdated and irrelevant data on film websites often prevents users in finding current movie information. This research develops an application using Next.JS, integrated with the Fetch API, to dynamically retrieve data using Server-Side Rendering (SSR) and Static Site Generation (SSG), improving communication between server and client, while providing a responsive and SEO-friendly user experience. Testing results with Lighthouse and Chrome DevTools show improved performance, with an application score of 92 on the Vercel platform and 82 on the Local side. Cache optimization on Vercel also reduced data transfer size from 2.2 MB to 0.27 MB, significantly speeding up load times and stabilizing the application. These results indicate that the application successfully delivers relevant and up-to-date information with high speed and stable performance. However, this study is limited in terms of testing devices and focuses only on the Vercel hosting platform.