DEV Community

Murilo Lodovico
Murilo Lodovico

Posted on

SSR, ISR, CSR

SSR

Server Side Rendering

Trata-se de uma abordagem diferente de render de tela, pela fato do node ser composto por javascript, o next consegue usar isso a seu favor fazendo a renderinizacao de tela por parte do servidor e nao mais pela parte do cliente, assim diminuindo o uso de memoria RAM do processador do cliente.

Pontos Positivos:

  • SEO APRIMORADO: permite que os motores de busca indexem facilmente o conteudo das paginas, tornando seu aplicativo mais amigavel para mecanismos de busca.
  • Carregamento Rapido da Pagina Inicial: O Conteudo da pagina inicial inicial pode ser renderizado no servidor, reduzindo o tempo de carregamento inicial melhorando a performance.
  • Experiencia de Usuario: Pode-se garantir que os usuarios recebem uma pagina completamente renderizada desde o inicio. Isso evita flashes de conteudo vazio e melhora desempenho.
  • Cache do Lado do Servidor: Eh possivel implementar um cache do lado do servidor para armazenar paginas pre-renderenizadas, o que pode reduzir a carga do servidor e acelerar as respostas as solicitacoes subsequentes.

Pontos Negativos:

  • Complexidade de Desenvolvimento: Implentar esse formato pode ser mais complexo do que renderizar do lado do cliente (CSR). Requer um entendimento maior sobre arquitetura e pode precisar de mais configuracoes.
  • Custo de Recursos do Servidor: esse metodo coloca uma carga significativa no servidor, principalmente quando se necessita de um grande numeo de solicitacoes simultaneas. Utilizando mais memoria e aumentando os custos de hospedagem.
  • Latencia do Servidor: a latencia entre cliente e servidor pode afetar o desempenho da renderizacao ou se o servidor estiver sobrecarregado gerando um atraso no carregamento.
  • Menos Flexibilidade no Cliente: pela maior parte do processamento ser carregada do lado do servidor, limitando a capacidade do usuario de personalizar e interagir em relacao ao CSR.
  • Tempo de Desenvolvimento Maior: geralmente leva-se mais tempo para se desenvolver uma pagina SSR, devido a complexidade e a necessidade de gerenciar o ciclo de vida do servidor.

ISR

Incremental Static Rendering

Trata-se de uma abordagem que combina o Static Site Generation (SSG) e o Server Side Rendering (SSR) para criar paginas estaticas que podem ser atualizadas de forma incremental ao em vez de serem totalmente recriadas sempre que ocorrer uma alteracao.

Pontos Positivos:

  • Desempenho Melhorado: o ISR permique que as paginas sejam pre-renderizadas de forma estatica e regeneradas em segundo plano. Resultando em tempos de carregamento menores para os usuarios, pois muitas partes do conteudo ja estao prontas antes mesmo de selem solicitadas.
  • Flexibilidade: esse metodo oferece um esquilibrio entre o SSR e o SSG, podendo assim definir quais partes serao estaticas e quais serao dinamicas, flexibilizando a otimizacao e desempenho.
  • Experiencia do Usuario: altamente otimizados para carregamento rapido, proporcionando uma experiencia de usuario mais satisfatoria.
  • SEO Melhorado: benefico para SEO, uma vez que as paginas podem ser pre-renderenizadas e fornecer conteudo facilmente indexavel pelos motores de busca.
  • Economia de Recursos: permite atualizar partes especificas de uma pagina sem ter que recriar a pagina inteira, economizando recursos do servidor.

Pontos Negativos:

  • Complexidade de Desenvolvimento: implementar o SSR chega a ser mais complexo do que SSR ou SSG, eh necessario entender as tecnicas e definir os pontos corretor de regeneracao incremental.
  • Tamanho do Aplicativo: Dependendo de como se configura, pode acabar ficando maior em relacao a tamanho, gerando multiplas versoes da pagina.
  • Cache e Limpeza: gerenciar e limpar o cache de forma adequada pode ser desafiador, principalmente quando o conteudo tem atualizacoes frequentes.
  • Tempo de Publicacao: pode atrasar a publicacao de conteudo em comparacao ao SSG, pois as paginas precisam ser regeneradas apos a primeira solicitacao.
  • Picos de Carga no Servidor: Dependendo do trafego do site, pode haver picos de carga no servidor quando as paginas sao geradas. # CSR

Client Side Rendering

Nesse contexto significa que a renderizacao da pagina e a montagem dos componentes ocorrem do lado do cliente, ou seja no navegador do usuario ao inves de serem realizadas no servidor.

Pontos Positivos:

  • Carregamento Inicial Rapido: oferece um carregamento inicial rapido, uma vez que o servidor envia um esqueleto basico da pagina e o conteudo real eh buscado e renderizado no navegador do usuario.
  • Maior Flexibilidade do Cliente: as interacoes no lado do cliente sao mais flexiveis, como animacoes, transicoes entre paginas e atualizacoes de estado sem a necessidade de recarregar a pagina inteira.
  • Menos Carga no como todo o processo de render ocorra na parte do usuario, o servidor economiza em termos de CPU e memoria. Tornando a aplicacao escalavel e capaz de lidar com grandes numeros de requisicao.
  • Cache do Lado do Cliente: cache do lado do cliente para armazenar dados que podem ser reutilizados sem a necessidade de fazer solicitacoes adicionais ao servidor
  • Atualizacoes de Conteudo Dinamico: o CSR eh apropriado para casos em que partes espesificas de uma pagina presisam ser atualizadas dinamicamente, sem a necessidade de recarregar a pagina inteira.

Pontos Negativos:

  • SEO Limitado: como o render ocorre do lado do cliente, os motores de busca podem ter dificuldade em indexar o conteudo, pois o HTML inicial pode conter somente o esqueleto basico da aplicacao.
  • Flash de Conteudo Vazio: os usuarios podem ver uma breve “tela em branco”, enquanto a tela eh renderizada.
  • Desempenho em Redes de Baixa Velocidade: em redes lentas, o carregamento da pagina pode ser mais demorado, uma vez que todo conteudo precisa ser buscado e renderizado no navegador.
  • Seguranca e Gerenciamento de Estado: parte da logica do aplicativo eh executada no navegador, eh importante garantir que a seguranca seja mantida, o gerenciamento de estado tambem pode ser mais complexo em comparacao ao SSR.
  • SEO e Compartilhamento em Redes Sociais: a falta de conteudo no HTML inical pode afetar negativamente a pre-visualizacao em redes sociais, ja que as informacoes iniciais sao limitadas.

Top comments (0)