Implementasi dan Manajemen State Pada Website Next.js: Perbandingan Context API dan Redux Pada Website Mangaice

Implementation and State Management on the Next.js Website: Comparison of Context API and Redux on the Mangaice Website

Penelitian ini bertujuan untuk mengimplementasi dan membandingkan dua state management tools, Context API dan Redux, dalam pengembangan website Mangaice. Perbandingan dilakukan berdasarkan performa, skalabilitas, penggunaan memori, arsitektur, fleksibilitas, dan kemampuan kostumisasi. Hasil pengujian menunjukkan bahwa Redux unggul 11,16% dalam performa, terutama dalam menampilkan konten utama dan rendering pada repeat view, sedangkan Context API lebih efisien dalam scripting dan painting. Dari segi skalabilitas, Redux lebih unggul 25,91%, dengan waktu respons lebih cepat, throughput lebih tinggi, dan stabilitas lebih baik dalam skenario dengan banyak pengguna. Dalam penggunaan memori, Redux lebih efisien dengan penghematan total sebesar 51,0% dibandingkan Context API setelah adanya interaksi pengguna. Pada akses awal, Redux juga lebih hemat sekitar 3,5%. Dari segi arsitektur, Context API lebih cocok untuk aplikasi sederhana hingga menengah karena setup-nya mudah dan integrasi cepat. Sebaliknya, Redux lebih ideal untuk aplikasi kompleks dan besar berkat struktur yang lebih fleksibel dan scalable. Untuk fleksibilitas dan kustomisasi, Redux unggul dengan dukungan middleware, debugging tools, serta kemampuan kostumisasi melalui reducers dan actions, meskipun membutuhkan setup awal yang lebih rumit. Context API menjadi pilihan ideal untuk aplikasi sederhana dengan kebutuhan state minimal. Secara keseluruhan, Redux lebih unggul untuk aplikasi berskala besar, sedangkan Context API lebih sesuai untuk aplikasi kecil hingga menengah.

This study aims to implement and compare two state management tools, Context API and Redux, in the development of the Mangaice website. The comparison focuses on performance, scalability, memory usage, architecture, flexibility, and customization capabilities. The results show that Redux outperforms Context API in terms of performance by 11.16%, especially in displaying main content and rendering during repeat views, while Context API is more efficient in scripting and painting. In terms of scalability, Redux is 25.91% better, offering faster response times, higher throughput, and greater stability under light user loads. Regarding memory usage, Redux is significantly more efficient, with a total memory savings of 51.0% compared to Context API after user interaction. On initial access, Redux also demonstrates approximately 3.5% better memory efficiency. From an architectural perspective, Context API is better suited for small to medium applications due to its simpler setup and easier integration. In contrast, Redux is more ideal for complex and large-scale applications because of its more 

structured, flexible, and scalable architecture. For flexibility and customization, Redux excels with support for middleware, debugging tools, and extensive customization options through reducers and actions, although it requires a more complex initial setup. On the other hand, Context API is the ideal choice for simpler applications with minimal state management needs. Overall, Redux is superior for large-scale applications, while Context API is more appropriate for smaller to medium-scale applications.