Neste artigo, tentarei examinar a questão da RSS e da RSC , que já discuti anteriormente, com mais detalhes. Explicarei os métodos de renderização em um artigo.

Neste artigo, revisarei o artigo Rendering on Web de Jason Miller e Addy Osmani e tentarei explicar esse assunto.

O artigo é baseado no meu artigo Onde a renderização de HTML deve ser feita? que escrevi há algum tempo. Tudo começa com a pergunta no post do blog.

Ao desenvolver um site, existe a possibilidade de executar lógica e renderização em diferentes lugares. Como os desenvolvedores decidirão qual abordagem preferir quando há diferentes métodos de desenvolvimento de uma página web?

Para tomar essa decisão, os desenvolvedores precisam ter um bom entendimento dos métodos de renderização e das compensações de desempenho resultantes.

A.Renderização

Se você está se perguntando qual é o tópico de renderização. Você pode ler os detalhes no post do blog onde expliquei este tópico
.

B. Web estática vs. dinâmica

Outra coisa a entender é a diferença entre Web Estática e Web Dinâmica . Páginas web estáticas são páginas que não retornam ao servidor e fazem requisições com AJAX após recuperar a página do servidor (HTML, CSS, JS), seu conteúdo não muda de acordo com o usuário ou não contém dados dinâmicos (taxa de câmbio, clima, etc.) devido à alteração de dados nele contidos. Por exemplo, blogs, notícias, etc. Por outro lado, páginas dinâmicas são páginas da web que requerem AJAX, API, banco de dados, etc., onde o conteúdo da página muda de acordo com o intervalo de tempo e os parâmetros chamados.

C. Termos de desempenho

• TTFB (Tempo até o primeiro byte) O tempo entre clicar no link e receber o primeiro bit de conteúdo.
• FP (First Paint) O tempo que leva para mostrar o primeiro pixel ao usuário.
• FCP (First Contentful Paint) O tempo para exibir o primeiro conteúdo lógico na solicitação.
• TTI Time To Interactive O momento em que a página está pronta para interação com o usuário (conexão de todos os eventos)

• SSR (Server Side Rendering): Este é o método onde o processo de renderização é feito no lado do servidor e páginas dinâmicas são produzidas recuperando-as do banco de dados usando métodos como ASP.Net, JSP, PHP. Aqui, como o JS terá um papel muito menor na criação da tela, o FP e o FCP serão muito rápidos, enquanto o tempo que os dados levam para chegar do servidor será maior no TTFB .
• CSR (Client Side Rendering): Este é o método onde a renderização é feita no lado do navegador com métodos como Angular, React, Vue, Svelte, páginas dinâmicas são extraídas com AJAX e telas são criadas na tela combinando Template + Data com o método Template Rendering. Neste método, mesmo que realizemos o TTFB e o FP mais rapidamente, não podemos acelerar o TTI, ou seja, o tempo que o usuário leva para interagir com a página da web relevante.
• Renderização estática: neste método usado para páginas estáticas, como as páginas mudam muito pouco e não há necessidade de um banco de dados, as páginas são levadas ao seu estado final com o método de pré-renderização antes de serem enviadas ao servidor e são enviadas para CDN, ou ambientes de edge-caching, e são servidas muito rapidamente a partir daí. Ultimamente, ficou muito mais fácil produzir esses tipos de páginas com as ferramentas Gatsby e Jekyll. Nessas páginas, os tempos TTFB e TTI são bem curtos. As necessidades de execução ou interação de JS dessas páginas são muito baixas e limitadas.
• Renderização híbrida: embora faça sentido criar SSR para algumas páginas de acordo com sua carga de conteúdo, faz sentido criar algumas das páginas de alta carga com CSR lento. Estruturas como Next, Nuxt, Nest e Sapper surgiram para dar suporte a tais situações. Esta estrutura tem capacidades semelhantes ao adotar o método de desenvolvimento de componentes Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte no desenvolvimento de código.

Referências

• Renderização na Web
• Diferença entre páginas da Web estáticas e dinâmicas
• Onde a renderização HTML deve ser feita?

Você pode clicar neste link para acessar a continuação deste artigo ou outros artigos no grupo de artigos .