Analisis Perbandingan Kinerja Next.js dan Vue.js sebagai Framework Frontend pada Website Pembelajaran Huruf Hijaiyah Isyarat

Annisa Urohmah, Dr.Eng. Ir. Ganjar Alfian, S.T., M.Eng.

2026 | Tugas Akhir | D4 Teknologi Perangkat Lunak

Bahasa isyarat merupakan sarana komunikasi bagi penyandang tunarungu, termasuk dalam pembelajaran huruf hijaiyah isyarat. Perkembangan teknologi digital saat ini mendukung kemudahan aksesibilitas pembelajaran tersebut melalui platform aplikasi mobile dan situs web agar lebih fleksibel diakses. Seiring hal tersebut, kecerdasan buatan membuka peluang pengembangan aplikasi pembelajaran yang interaktif berbasis deteksi gerak tangan secara real-time. Dalam implementasinya, frontend memegang peran krusial dalam menangani akuisisi video, komunikasi backend, serta pembaruan antarmuka secara berkelanjutan. Penelitian ini bertujuan membandingkan kinerja framework Next.js dan Vue.js dalam pengembangan sistem tersebut melalui metrik penggunaan memori, eksekusi skrip, dan kecepatan muat. Hasil pengujian menunjukkan Vue.js unggul pada sebagian besar metrik. Pada pengujian bertahap hingga soal ke-30, metrik Scripting Vue.js membutuhkan waktu 19.226,93 ms, lebih efisien dari Next.js CSR (22.657,33 ms) dan Next.js SSR (23.029,40 ms). Pada metrik Rendering, Vue.js memerlukan waktu 154,26 ms, lebih rendah dari Next.js CSR (188,13 ms) dan Next.js SSR (196,07 ms). Dari aspek alokasi memori puncak, Vue.js konsisten di angka 3,87 MB, lebih hemat dibanding Next.js CSR (7,42 MB) dan Next.js SSR (7,72 MB). Pada metrik Largest Contentful Paint (LCP), Vue.js mencatatkan waktu 0,30 detik, lebih cepat dibanding Next.js SSR (0,60 detik) dan Next.js CSR (0,64 detik). Sebaliknya, Next.js hanya unggul pada metrik First Contentful Paint (FCP) sebesar 0,20 detik berbanding Vue.js 0,30 detik. Secara keseluruhan, Vue.js lebih optimal untuk stabilitas visualisasi kamera real-time. Pengujian User Acceptance Testing (UAT) menghasilkan tingkat penerimaan sebesar 96,22%, mengindikasikan sistem sangat layak digunakan untuk media pembelajaran huruf hijaiyah isyarat bagi komunitas muslim tuli maupun masyarakat umum.

Sign language is an essential communication medium for people with hearing impairments, including in learning Hijaiyah sign language. Recent advances in digital technology have improved the accessibility of sign language learning through mobile and web-based platforms. At the same time, artificial intelligence has enabled the development of interactive learning applications based on real-time hand gesture detection. In such systems, the frontend plays a crucial role in video acquisition, backend communication, and continuous user interface updates. This study compares the performance of Next.js and Vue.js for developing a real-time Hijaiyah sign language learning website. Performance was evaluated using memory usage, script execution, and page loading metrics. The results show that Vue.js outperformed Next.js in most performance metrics. At the final evaluation stage (30th question), Vue.js achieved a Scripting Time of 19.226,93 ms, outperforming Next.js CSR (22.657,33 ms) and Next.js SSR (23.029,40 ms). For Rendering Time, Vue.js recorded 154,27 ms, compared to 188,13 ms for Next.js CSR and 196,07 ms for Next.js SSR. Vue.js also maintained the lowest peak JavaScript heap usage at 3,88 MB, while Next.js CSR and SSR reached 7,42 MB and 7,72 MB, respectively. For Largest Contentful Paint (LCP), Vue.js achieved 0,30 s, whereas Next.js SSR and CSR recorded 0,60 s and 0,64 s. Next.js only outperformed Vue.js in First Contentful Paint (FCP), recording 0,20 s compared to 0,30 s. Overall, Vue.js demonstrated better suitability for real-time camera-based visualization. User Acceptance Testing (UAT) achieved an acceptance rate of 96,22%, indicating that the proposed system is highly suitable as a Hijaiyah sign language learning platform for the Muslim Deaf community and the general public.

Kata Kunci : Framework Frontend, Deteksi Isyarat Tangan, Next.js, Vue.js, Perbandingan Kinerja