ANALISIS PERFORMA RENDERING MENGGUNAKAN METODE KECEPATAN LOADING HALAMAN WEB BERBASIS FRAMEWORK NEXT.JS (STUDI KASUS WEBSITE FILMKU)

Di era digital yang berkembang pesat, situs web menjadi sangat penting untuk interaksi global, distribusi informasi, dan transaksi pengguna. Memilih teknik rendering yang tepat sangat penting untuk meningkatkan kinerja aplikasi web. Next.js adalah kerangka kerja baru yang dibuat untuk melampaui keterbatasan React dalam rendering sisi server. Penelitian ini menguji keefektifan Client-side Rendering, Server-side Rendering, dan Static Site Generation pada situs web Filmku berbasis Next.js dengan menggunakan metode loading time. Penelitian tersebut menekankan pada kecepatan loading halaman, kecepatan rendering halaman secara lengkap (finish), dan pengalaman pengguna. Pada halaman autentikasi, proses Client-Side Rendering (CSR) membutuhkan waktu 422 ms, lebih lambat 57,41% dibandingkan waktu selesai Static Site Generation (SSG) yang membutuhkan waktu 180 ms dan lebih lambat 34,88% dibandingkan dengan Server-Side Rendering (SSR) yang mampu menyelesaikan halaman auth dalam waktu 274 ms. Pada halaman Profil, SSG menyelesaikan proses rendering halaman dalam waktu yang jauh lebih singkat, hanya membutuhkan waktu 524 ms, yang mana 25,79% lebih cepat daripada waktu penyelesaian SSR 706 ms dan bahkan 13,75% lebih cepat daripada waktu penyelesaian CSR 608 ms. Pada halaman utama, SSG dengan waktu finish 1135 ms, 15,93% lebih cepat daripada waktu penyelesaian CSR 1350 ms dan bahkan 25,57% lebih cepat daripada waktu penyelesaian SSR 1525 ms. Metode rendering static site generation (SSG) terbukti memiliki kecepatan rendering yang lebih cepat dibandingkan dengan metode lainnya. Di sisi lain, rendering sisi klien (CSR) dapat menyebabkan waktu muat halaman awal yang lebih lambat. Server-side rendering (SSR), meskipun memberikan waktu rendering yang stabil, dapat membebani server karena setiap permintaan dari klien sepenuhnya diproses di server. Penelitian lebih lanjut dapat mengambil manfaat dari mengeksplorasi pengujian stres, pengujian beban, dan metode pengujian kompleks lainnya untuk meningkatkan pengembangan di masa depan. Selain itu, pengujian dapat dilakukan pada halaman web yang sesuai dengan metode rendering yang digunakan, agar dapat memaksimalkan performa dari metode rendering yang digunakan.
====================================================================================
Websites have become essential for global interaction, information distribution, and user transactions in the rapidly evolving digital age. Choosing the appropriate rendering technique is critical to improving web application performance. Next.js is a new framework designed to overcome React's limitations in server-side rendering. This study examines the efficacy of Client-side Rendering, Server-side Rendering, and Static Site Generation on the Next.js-based Filmku website using the loading time method. The study focuses on page loading speed, complete page rendering speed, and user experience. The authentication page takes 422 ms to complete the Client-Side Rendering (CSR) process, which is 57.41% slower than the Static Site Generation (SSG) finish time of 180 ms and 34.88% slower than Server-Side Rendering (SSR), which completes the auth page in 274 ms. On the Profile page, SSG completes the page rendering process much faster, taking only 524 ms, which is 25.79% faster than SSR's completion time of 706 ms and even 13.75% faster than CSR's completion time of 608 ms. On the main page, the static site generation (SSG) rendering method completed in 1135 ms, which is 15.93% faster than the client-side rendering (CSR) completion time of 1350 ms and even 25.57% faster than the server-side rendering (SSR) completion time of 1525 ms. It is clear that SSG has a faster rendering speed compared to the other methods. However, it should be noted that CSR can lead to slower initial page load times. Server-side rendering (SSR) can provide stable rendering times, but it can also burden the server as every client request is fully processed on the server. Future research can benefit from exploring stress testing, load testing, and other complex testing methods to improve development. Additionally, tests should be conducted on web pages suitable for the rendering method used to maximize performance.