Comparison of Web Page Rendering Methods Based on Next.js Framework Using Page Loading Time Test

Abstract

In the rapidly developing digital age, websites have become indispensable for interaction, information dissemination and transaction. To improve the performance of web applications, choosing the right rendering technology is critical. Next.js is a framework designed to overcome React's limitations in server-side rendering. This study investigates the effectiveness of Client-side Rendering (CSR), Server-side Rendering (SSR), and Static Site Generation (SSG) on the Next.js-based Filmku website using the loading time method. The study concentrates on page loading speed, complete page rendering speed, and user experience. The authentication page takes 422 ms to complete the CSR process, which is 57.41% slower than the SSG finish time of 180 ms and 34.88% slower than SSR, which completes the authentication 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. The SSG rendering method completed in 1,135 ms on the main page, which is 15.93% faster than the CSR completion time of 1,350 ms and 25.57% faster than the SSR completion time of 1,525 ms. It is evident that SSG has a faster rendering speed compared to the other methods. However, it should be noted that CSR may result in slower initial page load times. SSR can provide stable rendering times, but it can also burden the server as every client request is fully processed on the server.

Keywords

• client-side rendering
• next.js
• server-side generation
• server-side rendering