Personalize as preferências de consentimento
Utilizamos cookies para ajudá-lo a navegar com eficiência e executar determinadas funções. Você encontrará informações detalhadas sobre todos os cookies em cada categoria de consentimento abaixo.

Os cookies categorizados como “Necessários” são armazenados no seu navegador, pois são essenciais para ativar as funcionalidades básicas do site.

Também utilizamos cookies de terceiros que nos ajudam a analisar como você usa este site, armazenam suas preferências e fornecem conteúdo e anúncios que são relevantes para você. Estes cookies só serão armazenados no seu navegador com o seu consentimento prévio.

Você pode optar por ativar ou desativar alguns ou todos esses cookies, mas a desativação de alguns deles pode afetar sua experiência de navegação.
Sempre ativo

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

Não há cookies para exibir.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

Não há cookies para exibir.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

Não há cookies para exibir.

Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Não há cookies para exibir.

Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.

Não há cookies para exibir.

Conceitos de Programação

Introdução à Renderização Web

16 de março de 2022

[vc_row][vc_column][vc_column_text]Atualmente, no mundo do desenvolvimento web, é cada vez mais exigido que as páginas sejam rápidas, suaves e que tenham seu conteúdo encontrado pelos bots dos principais mecanismos de pesquisa. Você sabia que a escolha da abordagem de renderização web da sua página impacta positivamente ou negativamente em cada um desses fatores citados?

[adrotate banner=”4″]

Acompanhe o artigo e saiba mais sobre como as renderizações web podem impactar seus resultados.

Afinal, o que é a renderização?

Basicamente, renderização é o tempo que uma página leva para ter todo seu conteúdo visível na tela logo após ter tido sua URL acionada por algum navegador. Atualmente, no universo web, podemos realizar toda a renderização da página no próprio navegador, através do JavaScript ou então no servidor.

Já temos ferramentas disponíveis no mercado que criam uma abordagem híbrida de renderização através da (re)hidratação da página.

Pensando nisso, pode ser que você esteja se questionando como é possível distinguir uma página renderizada pelo cliente de uma página renderizada no servidor. Bom, veremos isto agora. Observe bem as imagens abaixo:

Figura 1: Representação de um conteúdo HTML5.
Figura 1: Representação de um conteúdo HTML5.
Figura 02: Representação de um conteúdo HTML5.
Figura 02: Representação de um conteúdo HTML5.

Na Figura 01, temos um HTML já povoado com algum tipo de conteúdo, neste caso, uma listagem de tarefas. Basicamente, este é o primeiro snapshot que você verá do seu HTML quando sua página for renderizada. Ter todo o conteúdo já pré-gerado no seu HTML é uma característica de páginas renderizadas pelo servidor.

Contudo, temos um cenário totalmente adverso na Figura 02. Vemos apenas um único elemento dentro da tag body, e isto é uma característica de páginas que tem todo seu conteúdo gerado pelo cliente através do JavaScript em tempo de execução. Através deste único elemento dentro da tag body, toda a página será montada.

Após essa breve introdução, que tal vermos um pouco mais das principais características de ambas abordagens de renderizações? Vamos lá!

Renderização no servidor

Este tipo de renderização é bastante conhecido por proporcionar uma ótima experiência de desempenho na renderização, mas já logo adianto, isto não é uma bala de prata.

A renderização no servidor implica que toda a lógica de busca de dados e geração do conteúdo é de total responsabilidade do servidor. Assim, toda carga está sob o servidor.

Digamos que essa abordagem de renderização é reconhecida por maximizar o desempenho do carregamento das páginas – algo crítico para a experiência do usuário. Isso se deve por causa da baixa quantidade de conteúdo que o navegador precisará baixar, já que toda lógica está sob responsabilidade total do servidor.

Entretanto, além de implementar esta abordagem, você terá que por a mão na massa para ver as vantagens em relação ao desempenho em ação. Utilizar esta abordagem não é uma garantia de maximização no desempenho da renderização da sua página.

Podemos dizer que uma das principais vantagens que vemos através deste tipo de renderização é o desempenho de SEO. Isso ocorre devido aos seguintes motivos:

1. Conteúdo

Neste tipo de renderização, a página só é servida para o navegador logo após todo conteúdo já ter sido gerado pelo próprio servidor. Em vista disso, quando um bot de algum mecanismo de pesquisa visitar uma página que implementa esta abordagem, todo o conteúdo estará lá, pronto para ser indexado e crowleado por este bot.

2. Velocidade

Um dos principais mecanismos de busca, o Google, já adota como critério a velocidade para classificação da página. Sendo que, através deste tipo de renderização, se destaca pela sua velocidade de renderização.

Vale ressaltar que, dificilmente, após o conteúdo ser renderizado em tela, o usuário não conseguirá interagir com a página. Isso ocorre porque a quantidade de JavaScript enviada para o navegador nesta abordagem é bem pequeno, gerando uma rapidez no tempo que a página leva para se tornar totalmente interativa, também conhecido como TTI.

Mas nem tudo são rosas, não é mesmo? Como toda lógica de renderização da página é de total responsabilidade do servidor, isto pode implicar em alguns problemas, dentre eles:

  • Lentidão: gerar páginas no servidor leva tempo, o que pode ocasionar em uma lentidão do TTFB (Time to First Byte);
  • Custoso: com o aumento da complexidade das páginas, manter este tipo de renderização pode se tornar facilmente algo custoso, além de consumir muitos recursos.

Renderização no cliente

Através deste tipo de abordagem de renderização, o cliente passa a ser o responsável pela geração de todo conteúdo da página através da execução em tempo real do JavaScript. Lembra da Figura 02 do início do artigo? Nela vimos um exemplo de boilerplate de HTML comumente utilizado nesta abordagem de renderização.

Aquele elemento div encontrado no body da aplicação é o elemento raiz nesta abordagem de renderização. Ele é o ponto de entrada da construção de toda nossa página.

Essa maneira de criar uma página através do JavaScript pode ser algo crítico para o SEO da página, já que a maioria dos bots dos mecanismos de pesquisa não entendem por completo o JavaScript, apesar deste cenário estar mudando ao longo do tempo.

Geralmente, temos um tempo de renderização um pouco lento nesta abordagem. E isso piora à medida que a complexidade do JavaScript aumenta.

Este problema pode ser considerado a principal desvantagem desta abordagem. Isso porque prejudica diretamente a experiência do usuário. Porém, o tempo de demora na renderização é só no primeiro carregamento. Após todo JavaScript ter sido baixado, não haverá necessidade de baixar mais alguma coisa do servidor. Com isso, nossa página se torna muito rápida em suas interatividades.

Esta abordagem de renderização se caracteriza em aplicações que possuem a separação entre camadas de responsabilidade. Ou seja, o servidor será responsável apenas por servir o conteúdo. Já o cliente, apenas por montar a página com base neste conteúdo. Logo, temos a divisão entre ambas aplicações: front-end e back-end.

Conclusão

Grande parte das bibliotecas e frameworks que temos hoje no mercado implementa nativamente algum destes tipos de renderizações. Sendo o mais popular deles o React, com sua abordagem de criação de Single Page Application (SPA), que constrói toda interface através da execução do JavaScript no lado do cliente.

Porém, também temos o surgimento de um incrível framework React, o Next.js, que se destaca por sua abordagem de renderização híbrida. Ou seja, através dele podemos unir ambos os mundos de renderizações numa única abordagem, também conhecida como SSR Hydratation, que implementa uma técnica (re)hidratação da página para que, após o conteúdo ter sido gerado pelo servidor, todo controle da interatividade seja de total responsabilidade do React, por exemplo.

Conclui-se que a escolha de uma abordagem de renderização para cada cenário é um fator preponderante para um time de desenvolvimento. É através dessa abordagem selecionada que podemos ocasionar (de maneira positiva ou não) uma boa experiência ao usuário final através das nossas páginas.[/vc_column_text][/vc_column][/vc_row]

Veja também:
SEO Utilizando Next JS

[adrotate banner=”5″]

Imagem padrão

Autor

Julia Ilkiu

Artigos relacionados

Receba nossa
newsletter

Assine nossa newsletter e receba as últimas
novidades sobre o mundo da tecnologia.

    Eu autorizo a Luby a usar meus dados para o envio de conteúdos personalizados.