Web Page Performance Comparison: An Analysis of Client-Side Rendering and Server-Side Rendering

• Gabriel Trevisan Damke UTFPR
• Daniel Mahl Gregorini UTFPR

DOI: https://doi.org/10.5753/latinoware.2024.245694

Abstract

With the advancement of search engines and website ranking systems, the use of search engine optimization (SEO) techniques has become vital for enhancing online visibility, with page performance being one of the main metrics considered by browsers. This study compares two web page rendering approaches: Client-Side Rendering (CSR) and Server-Side Rendering (SSR). Two pages, each employing one approach, were developed using the Next.js framework and evaluated with the Lighthouse tool, simulating various network conditions. The performance and SEO metrics examined include First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Speed Index, and Cumulative Layout Shift (CLS). The results reveal significant variations in page performance under different connectivity conditions, highlighting the advantages and disadvantages of each rendering method in terms of SEO.

Keywords: SEO, Search engine optimization, Client-Side Rendering, Server-Side Rendering, Web page performance, Nextjs

References

A. Verzbickas, E. F. Mocelin, M. B. de Souza Neto, e R. T. Siega, "Relatório Web Crawlers," Universidade Federal de Santa Catarina, Centro Tecnológico, Departamento de Informática e Estatística, Curso de Sistemas de Informação, INE5644 - Data Mining, Florianópolis, Brasil, 2013. [Online]. Available: [link]

A. Jain e M. Dave, "The Role of Backlinks in Search Engine Ranking," International Journal of Advanced Research in Computer Science and Software Engineering, vol. X, no. X, pp. 1-6, 2024. Disponível em: [link]

T. Rascia, *Understanding the DOM — Document Object Model*. New York City, NY, USA: DigitalOcean, 2020. ISBN: 978-0-9997730-9-3.

Lighthouse Overview, Chrome Developers, Aug. 24, 2024. [Online]. Available: [link]. Acesso em: 23 de agosto de 2024.

A. H. Schneider, "Desenvolvimento web com Client Side Rendering: combinando Single Page Application e serviços de backend," Bacharelado, Instituto de Informática, Universidade Federal do Rio Grande do Sul, Porto Alegre, Brasil, 2016. [Online]. Disponivel: [link]

D. Mladenovic, A. Rajapakse, N. Kožuljevic, e Y. Shukla, "Otimização de mecanismos de busca (SEO) para profissionais de marketing digital: explorando determinantes de visibilidade online para serviços de banco de sangue," Online Information Review, vol. X, no. X, pp. 1-20, 2024. [Online]. Disponível em: [link]

Next.js - The React Framework for Production, Next.js, [Online]. Disponível em: [link]. Acessado em: 23 de agosto de 2024.

npm - Node Package Manager, npm, [Online]. Disponível em: [link]. Acessado em: 23 de agosto de 2024.

Í. L. da C. S. Silva, "Do 1G ao 5G: Evolução das Redes de Telefonia Móvel," Bacharelado em Ciências Exatas e Tecnológicas, Universidade Federal do Recôncavo da Bahia, Cruz das Almas, Brasil, 2016. [Online]. Disponível em: [link].