Perbandingan Performa Metode Client-Side dan Server-Side Rendering pada Aplikasi Web Berdasarkan Google Core Web Vitals

Royan Agist Ramadhan, Drs. Medi, M.Kom.

2025 | Skripsi | ILMU KOMPUTER

Perkembangan teknologi web memunculkan beragam pendekatan rendering untuk mengoptimalkan performa aplikasi, termasuk Client-Side Rendering (CSR) dan Server-Side Rendering (SSR). Kedua metode ini memiliki karakteristik yang berbeda dalam aspek arsitektur dan dampaknya terhadap pengalaman pengguna. Pada Maret 2024, Google memperbarui metrik Core Web Vitals dengan mengganti First Input Delay (FID) menjadi Interaction to Next Paint (INP), sehingga aspek pengukuran performa situs web menjadi lebih menyeluruh. Pembaruan ini mendorong perlunya penelitian lebih lanjut untuk memahami bagaimana CSR dan SSR memengaruhi metrik baru ini, yaitu Largest Contentful Paint (LCP), Interaction to Next Paint (INP), dan Cumulative Layout Shift (CLS). Penelitian ini bertujuan untuk membandingkan performa CSR dan SSR dalam konteks metrik-metrik tersebut.

Implementasi kedua metode dilakukan menggunakan framework Next.js pada aplikasi web berita dan diuji melalui Chrome Developer Tools serta Next.js useReportWebVitals. Hasil penelitian menunjukkan bahwa pada aplikasi yang diuji, metode CSR menghasilkan skor Largest Contentful Paint (LCP) rata-rata 2.62s dan Interaction to Next Paint (INP) rata-rata 64.8ms, yang lebih baik dibandingkan metode SSR (LCP 3.55s; INP 78.4ms). Untuk Cumulative Layout Shift (CLS), kedua metode menunjukkan skor yang memerlukan perbaikan signifikan (CSR 0.59; SSR 0.77), meskipun CSR sedikit lebih unggul. Penelitian ini menyimpulkan bahwa CSR dapat menawarkan keunggulan pada metrik LCP dan INP untuk jenis aplikasi yang diuji, namun optimasi CLS menjadi krusial untuk kedua metode. Pemilihan metode rendering direkomendasikan berdasarkan evaluasi performa pada kebutuhan spesifik proyek untuk meningkatkan pengalaman pengguna.

The evolution of web technology has introduced various rendering approaches to optimize application performance, including Client-Side Rendering (CSR) and Server-Side Rendering (SSR). These two methods possess distinct characteristics in their architecture and impact on user experience. In March 2024, Google updated its Core Web Vitals metrics by replacing First Input Delay (FID) with Interaction to Next Paint (INP), making the measurement of website performance more comprehensive. This update necessitates further research to understand how CSR and SSR affect these new metrics, namely Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). This study aims to compare the performance of CSR and SSR within the context of these metrics.

The implementation of both methods was conducted using the Next.js framework on a news web application and tested via Chrome Developer Tools and the Next.js useReportWebVitals hook. The results indicate that in the tested application, the CSR method yielded an average Largest Contentful Paint (LCP) score of 2.62s and an Interaction to Next Paint (INP) score of 64.8ms, which were better than the SSR method's scores (LCP 3.55s; INP 78.4ms). For Cumulative Layout Shift (CLS), both methods showed scores that require significant improvement (CSR 0.59; SSR 0.77), although CSR performed slightly better. This research concludes that CSR can offer advantages for LCP and INP metrics in the type of application tested, yet CLS optimization is crucial for both methods. The selection of a rendering method is recommended to be based on a performance evaluation tailored to the specific needs of a project to enhance user experience.

Kata Kunci : Client-Side Rendering, Server-Side Rendering, Core Web Vitals, Next.js