Utilize este link para identificar ou citar este item:
https://bdm.unb.br/handle/10483/42130
| Título: | Client-side vs. server-side rendering: understanding performance trade-offs in web development |
| Autor(es): | Erhardt, Gabriel Delolmo |
| Orientador(es): | Porto, Daniel de Paula |
| Assunto: | Desenvolvimento web
Cliente/servidor (Computadores)
Renderização - métodos |
| Data de apresentação: | 21-Fev-2025 |
| Data de publicação: | 5-Nov-2025 |
| Referência: | ERHARDT, Gabriel Delolmo. Client-side vs. server-side rendering: understanding performance trade-offs in web development. 2025. 37 f., il. Trabalho de Conclusão de Curso (Bacharelado em Engenharia da Computação) — Universidade de Brasília, Brasília, 2025. |
| Resumo: | Investigamos o desempenho de Server Side Rendering (SSR) em comparação com a Client
Side Rendering (CSR) ao recriar um site feito com HTMX em diferentes frameworks.
Criamos a mesma página usando HTMX e Next.js com React Server Components para
representar a abordagem SSR, enquanto Vue e Next.js com React tradicional foram usados
para representar a abordagem CSR. Coletamos informações sobre o tamanho dos arquivos,
o desempenho na navegação e a performance ao longo de um fluxo do usuário. Essas
métricas foram obtidas usando o plugin do Lighthouse e o Chrome DevTools. O React
teve o tempo para atualização de página mais curto, enquanto o RSC foi o mais longo. O
Vue gerou o menor bundle e, de modo geral, apresentou um bom desempenho considerando
o esforço necessário para construir a página. |
| Abstract: | We research the performance of Server Side Rendering (SSR) vs. Client Side Rendering (CSR) by re implementing a website developed with HTMX in other frameworks.
We implemented the same website in HTMX, NextJs using React Server Components as
representatives of the SSR approach, and used Vue and NextJs with plain React as the
representatives of the CSR approach. We collect data on bundle size, navigation performance, and on performance during a timespan of a user flow. We collect these metrics
using Lighthouse and the Chrome DevTools. React provided the best page update times,
while RSC was the slowest. Vue had the smallest bundle size and in general showed good
performance in relation to the amount of work that was required to implement the page. |
| Informações adicionais: | Trabalho de Conclusão de Curso (graduação) — Universidade de Brasília, Instituto de Ciências Exatas, Departamento de Ciência da Computação, 2025. |
| Licença: | A concessão da licença deste item refere-se ao termo de autorização impresso assinado pelo autor que autoriza a Biblioteca Digital da Produção Intelectual Discente da Universidade de Brasília (BDM) a disponibilizar o trabalho de conclusão de curso por meio do sítio bdm.unb.br, com as seguintes condições: disponível sob Licença Creative Commons 4.0 International, que permite copiar, distribuir e transmitir o trabalho, desde que seja citado o autor e licenciante. Não permite o uso para fins comerciais nem a adaptação desta. |
| Aparece na Coleção: | Engenharia da Computação
|
Todos os itens na BDM estão protegidos por copyright. Todos os direitos reservados.
