Comparison of Web Page Rendering Methods Based on Next.js Framework Using Page Loading Time Test
DOI:
https://doi.org/10.34148/teknika.v13i1.769Keywords:
Client-Side Rendering, Next.Js, Server-Side Generation, Server-Side RenderingAbstract
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.
Downloads
References
A. Suprapto and D. Sasongko, “Evaluasi Performa Website Berdasarkan Pengujian Beban Dan Stress Menggunakan Loadimpact (Studi Kasus Website Iain Salatiga),” Netw. Eng. Res. Oper., vol. 6, no. 1, p. 31, 2021, doi: 10.21107/nero.v6i1.198.
M. F. Santoso, “Teknik Single Page Application (SPA) Layout Web Dengan menggunakan React Js Dan Bootstrap,” J. Khatulistiwa Inform., vol. 9, no. 2, pp. 107—114, 2021, doi: 10.31294/jki.v9i2.11357.
Suliman, “Analisis Performa Website Universitas Teuku Umar Dan Universitas Samudera Menggunakan Pingdom Tools Dan Gtmetrix,” J. Sist. Inf. dan Sist. Komput., vol. 5, no. 1, pp. 24—32, 2020, doi: 10.51717/simkom.v5i1.47.
A. Yusuf F, I. Nuryasin, and Z. Sari, “Optimasi Kecepatan Loading Time Web Template Dengan Implementasi Teknik Front-End,” J. Repos., vol. 2, no. 11, p. 1456, 2020, doi: 10.22219/repositor.v2i11.746.
R. Ollila, N. Mäkitalo, and T. Mikkonen, “Modern Web Frameworks: A Comparison of Rendering Performance,” J. Web Eng., vol. 21, no. 3, pp. 789—813, 2022, doi: https://doi.org/10.13052/jwe1540-9589.21311.
D. Bui, “Next.Js for Front-End and Compatible Backend Solutions,” South-Eastern Finland, University of Applied Science, 2023.
J. Johansson, “Create React App vs NextJS,” 2021.
A. Hadjin, The Ultimate Next.js Ebook. JS Mastery, 2023.
M. Riva, Real-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production. Packt Publishing, 2022.
M. F. S. Lazuardy and D. Anggraini, “Modern Front End Web Architectures with React.Js and Next.Js,” Int. Res. J. Adv. Eng. Sci., vol. 7, no. 1, pp. 132—141, 2022.
H. A. Jartarghar, G. R. Salanke, A. K. A.R, S. G.S, and S. Dalali, “React Apps with Server-Side Rendering: Next.js,” J. Telecommun. Electron. Comput. Eng., vol. 14, no. 4, pp. 25—29, 2022.
V. Patel, “Analyzing the Impact of Next.JS on Site Performance and SEO,” Int. J. Comput. Appl. Technol. Res., no. November, 2023, doi: 10.7753/ijcatr1210.1004.
T. Fadhilah Iskandar, M. Lubis, T. Fabrianti Kusumasari, and A. Ridho Lubis, “Comparison between client-side and server-side rendering in the web development,” IOP Conf. Ser. Mater. Sci. Eng., vol. 801, no. 1, 2020, doi: 10.1088/1757-899X/801/1/012136.
A. A. Yusuf, “Analisis Static Site Generator Pada Web portal Berita,” Ind. High. Educ., vol. 3, no. 1, pp. 1—68, 2021.
E. Budiman, N. Puspitasari, S. N. Alam, T. M. A. Akbar, Haeruddin, and D. Indra, “Performance analysis of the resource loading time for borneo biodiversity information system,” in Proceedings of the 3rd International Conference on Informatics and Computing, ICIC 2018, 2018, pp. 1—5, doi: 10.1109/IAC.2018.8780515.
R. Oktrifianto, D. Adhipta, and W. Najib, “Page Load Time Speed Increase on Disease Outbreak Investigation Information System Website,” IJITEE (International J. Inf. Technol. Electr. Eng., vol. 2, no. 4, p. 114, 2019, doi: 10.22146/ijitee.46599.
A. Meredova, “Comparison of Server-Side Rendering Capabilities of React and Vue,” Haaga-Helia University of Applied Sciences, 2023.
O. Lyxell, “Server-Side Rendering in React : When Does It Become Beneficial to Your Web Program ?,” 2023.
R. N. V. Diniz-Junior et al., “Evaluating the performance of web rendering technologies based on JavaScript: Angular, React, and Vue,” in 2022 XVLIII Latin American Computer Conference (CLEI), 2022, pp. 1—9, doi: https://doi.org/10.1109/CLEI56649.2022.9959901.
H. Kurniawan and Eka Puji Widianto, “Analisis Peningkatan Performa Akses website Dengan Web Server Stress Tools,” Jatisi, vol. 2, no. 2, pp. 108—119, 2019.
I. M. E. Listartha, “Pengujian Performa dan Tingkat Stress pada Website Legalisir Ijasah Online Universitas Pendidikan Ganesha,” Electro Luceat, vol. 6, no. 1, pp. 66—73, 2020, doi: 10.32531/jelekn.v6i1.182.
M. C. Weigle, M. L. Nelson, S. Alam, and M. Graham, “Right HTML, Wrong JSON: Challenges in Replaying Archived Webpages Built with Client-Side Rendering,” 2023, doi: 10.1109/JCDL57899.2023.00022.
