Analisis Perbandingan Server Side dan Client Side Data Fetching pada Framework Next.Js (Studi Kasus Aplikasi Online Course) - Arya Bhanuartha, Putu Gde; Pinandito, Aryo; Akbar, Muhammad Aminul (Fakultas Ilmu Komputer (FILKOM), Universitas Brawijaya, 2025)
Perkembangan teknologi informasi telah membawa perubahan signifikan dalam berbagai industri, termasuk pendidikan melalui platform online course. PT Sekawan Media Informatika telah mengembangkan sebuah aplikasi online course berbasis website untuk siswa SMK, yang dibangun menggunakan arsitektur microservice dengan framework Next.js untuk sisi client dan Laravel untuk sisi server. Terdapat dua jenis halaman atau modul yang ada di aplikasi online course tersebut, yaitu halaman statis (portal) dan halaman dinamis (backoffice). Sebuah halaman statis yang memerlukan satu kali pengambilan data direkomendasikan untuk menggunakan server-side data fetching (Vercel Next.js, n.d.). Namun, pada aplikasi online course tersebut, halaman statis dikembangkan dengan teknik client-side data fetching. Meskipun aplikasi dapat berjalan dengan baik, pertambahan jumlah pengguna kedepannya dapat berpengaruh terhadap performa aplikasi. Oleh karena itu, diperlukan penelitian yang membahas mengenai teknik data fetching dan rendering yang tepat pada halaman statis sehingga dapat membantu perusahaan dalam mengoptimalkan dan membentuk sebuah standardisasi sehingga dapat memberikan performa aplikasi yang lebih baik. Penelitian ini membandingkan ukuran dokumen HTML, waktu render, dan skor Google Lighthouse versi 10 dengan metrik yaitu First Contentful Paint, Speed Index, Total Blocking Time, Largest Contenful Paint, dan Cummulative Layout Shift. Pengujian dilakukan dengan mengambil 100 sampel untuk masing-masing metrik pengukuran dan kedua jenis teknik data fetching. Seluruh pasangan data sampel berdistribusi tidak normal sehingga uji beda dapat dilakukan dengan metode Mann-Whitney U. Dari hasil analisis tersebut, dapat ditarik kesimpulan bahwa halaman yang menggunakan server-side data fetching memiliki ukuran dokumen HTML yang lebih besar, hal tersebut diakibatkan tersematkannya skrip JS oleh Next.Js sehingga hal tersebut dapat mempermudah proses rendering pada peramban. Overall, server-side data fetching memiliki waktu render yang lebih cepat dan skor Google Lighthouse yang lebih baik dibandingkan pada halaman yang menggunakan client-side data fetching.