Comparação de Desempenho em Páginas Web: Uma Análise de Client-Side Rendering e Server-Side Rendering

• Gabriel Trevisan Damke UTFPR
• Daniel Mahl Gregorini UTFPR

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

Resumo

Com o progresso dos mecanismos de busca e classificação de sites, a utilização de técnicas de otimização para motores de busca (SEO) tornou-se vital para aprimorar a visibilidade online, sendo a performance da página uma das principais métricas consideradas pelos navegadores. Este estudo compara duas abordagens de renderização de páginas web: Client-Side Rendering (CSR) e Server-Side Rendering (SSR). Duas páginas, cada qual empregando uma abordagem, foram desenvolvidas com o framework Next.js e avaliadas com a ferramenta Lighthouse, simulando variadas condições de rede. As métricas de desempenho e SEO examinadas incluem First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Speed Index e Cumulative Layout Shift (CLS). Os resultados revelam variações significativas no desempenho das páginas sob diferentes condições de conectividade, evidenciando as vantagens e desvantagens de cada método de renderização em termos de SEO.

Palavras-chave: SEO, Otimização de motores de busca, Client-Side Rendering, Server-Side Rendering, Performance de páginas web, Nextjs

Referências

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].