Optimisasi Kinerja Aplikasi Fitness Berbasis Next.js Melalui Penerapan Metode Caching Pada PT. Anugerah Wijaya Raga

Optimization of Response Time for Next.js Based Fitness Application Through the Implementation of Caching Methods at PT. Anugerah Wijaya Raga

Perkembangan teknologi web modern mendorong penggunaan framework seperti Next.js dalam pengembangan aplikasi. PT. Anugerah Wijaya Raga (AWR) mengembangkan aplikasi GGL (Gak Gendut Lagi) untuk manajemen nutrisi dan kebugaran, namun menghadapi tantangan kinerja terkait pemanggilan API yang tidak efisien dan berpengaruh ke respons aplikasi. Penelitian ini bertujuan mengoptimalkan kecepatan waktu respons aplikasi GGL dengan metode caching menggunakan Tanstack Query. Hasil menunjukkan bahwa caching efektif mengoptimalkan waktu respons aplikasi. Sebelum optimasi, waktu login hingga ke dashboard adalah 6,70 detik, setelah optimasi menjadi 4,43 detik (33,8%). Halaman mealplan meningkat dari 6 detik menjadi 3,94 detik (34,3%), dan halaman measurement dari 2,93 detik menjadi 1,47 detik (49,8%). Efektivitas pemanggilan API juga meningkat tanpa adanya duplikasi pemanggilan. Penerapan caching dan prefetching meningkatkan responsivitas aplikasi dan pengalaman pengguna secara keseluruhan.

The advancement of modern web technology encourages the use of frameworks such as Next.js in application development. PT. Anugerah Wijaya Raga (AWR) developed the GGL (Gak Gendut Lagi) application for nutrition and fitness management but faced performance challenges related to inefficient API calls, affecting the application's responsiveness. This study aims to optimize the response time of the GGL application by implementing caching methods using Tanstack Query. Results show that caching effectively optimizes application response time. Before optimization, the login to dashboard time was 6.70 seconds, which improved to 4.43 seconds (33.8%) after optimization. The Mealplan page speed increased from 6 seconds to 3.94 seconds (34.3%), and the Measurement page from 2.93 seconds to 1.47 seconds (49.8%). The efficiency of API calls also improved with no duplicate calls. The implementation of caching and prefetching enhances application responsiveness and overall user experience.