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?

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:

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.