Se você interage com SEO há anos, já deve ter encontrado o Server Side Rendering (SSR) como um dos conceitos. Por que optar pela renderização no lado do servidor (SSR) em vez da renderização no lado do cliente?
Neste guia, apresentarei o conceito de Server Side Rendering (SSR), sua importância no desenvolvimento web moderno e diferenciarei entre Server Side Rendering e Client Side Rendering. Também apresentaremos estruturas e bibliotecas que suportam renderização no servidor e como elas fazem isso.
últimas postagens
O que é renderização no lado do servidor (SSR)?
Server Side Rendering (SSR) é uma técnica de desenvolvimento web em que o conteúdo de uma página web é renderizado no servidor em vez de no navegador do cliente.
Para que isso aconteça, o servidor gera uma página HTML totalmente renderizada que envia ao navegador do cliente, o que significa que é o servidor quem faz o trabalho pesado. O navegador recebe uma página pronta para exibição, o que agiliza o tempo de carregamento inicial.
Como funciona a renderização do lado do servidor?
Sempre que um usuário solicita uma página da web, o servidor reúne todo o código JavaScript, HTML e CSS necessário e, em seguida, envia uma página totalmente formada ao navegador do usuário.
Dessa forma, o navegador não precisa formar uma página do zero, como acontece com a renderização do lado do cliente. SSR leva a uma página de carregamento inicial rápido e também é bom para SEO.
A renderização do lado do servidor usa estruturas da web como Vue.js e Gatsby.js nos bastidores para gerar dinamicamente uma página HTML totalmente funcional.
Essas estruturas extraem dados de APIs ou bancos de dados e, em seguida, usam componentes ou modelos para construir documentos HTML funcionais. Depois que o servidor termina de criar a página, ele a envia para o navegador do cliente sem qualquer processamento adicional.
Crédito da imagem: reagirpwa
É assim que funciona a renderização do lado do servidor:
- O cliente envia uma solicitação HTTP: um usuário insere um endereço na barra de endereços do navegador. O navegador estabelece uma conexão HTTP e envia uma solicitação ao servidor.
- Busca de dados: O servidor busca dados de APIs ou do banco de dados.
- Pré-renderização: o servidor compila todos os componentes JavaScript necessários em HTML estático e envia esse HTML para o navegador do cliente.
- Carregamento e renderização da página: o cliente baixa e exibe o HTML do servidor.
- Hidratação: O cliente finalmente baixa todo o código JavaScript para adicionar interatividade à página HTML.
Renderização do lado do servidor versus renderização do lado do cliente
A renderização do lado do cliente é o oposto da renderização do lado do servidor. Basicamente, o navegador gera um documento HTML que exibe aos usuários. Estas são as diferenças entre essas duas abordagens:
RecursoRenderização do lado do servidor (SSR)Renderização do lado do cliente (CSR)Tempo de carregamento inicialTempo de carregamento inicial rápidoPode ser lento, pois depende do carregamento do lado do clienteExperiência do usuárioExperiência do usuário aprimorada e aprimorada na primeira visitaPode, às vezes, resultar em uma experiência de usuário mais lenta experiência do usuário na primeira interação, mas aumenta nas visitas subsequentesAcessibilidade Todo o conteúdo essencial é carregado com o documento HTML inicial renderizado no servidorAcessibilidade pode ser um problema, especialmente quando os usuários desabilitaram o JavaScriptDesempenho de SEOSSR marca todas as caixas certas para SEOAlguns mecanismos de pesquisa podem encontrá-lo difícil indexar algumas páginas geradas dinamicamente no lado do clienteEscalabilidadeÉ fácil dimensionar sites de alto tráfego que empregam renderização no servidorOs desenvolvedores precisam criar uma abordagem bem pensada para dimensionar sites que praticam a renderização no lado do clienteSegurançaÉ fácil reduzir o servidor -vulnerabilidades do lado quando as páginas são carregadas no servidor.Propenso a ataques como cross-site scripting (XSS) e outras vulnerabilidades associadas à renderização do lado do cliente.
Benefícios da renderização do lado do servidor para SEO
- Tempo de carregamento inicial rápido: quanto tempo leva para uma página carregar é um dos fatores que os visitantes do seu site consideram. O SSR permite que os usuários do site vejam uma página HTML totalmente carregada quase instantaneamente. O carregamento instantâneo reduz o tempo que o usuário espera antes de interagir com uma página web.
- Desempenho rápido em dispositivos/redes lentos: a rede que os usuários estão usando para acessar suas páginas da web pode ser lenta ou eles estão usando dispositivos executados em sistemas operacionais não tão rápidos. A renderização no lado do servidor significa que os dispositivos dos usuários não precisam executar tanto JavaScript, o que aumenta seu desempenho. Essas redes ou dispositivos não precisam mais de muita largura de banda ou poder de processamento para exibir as páginas HTML carregadas.
- Experiência de usuário consistente: o SSR permite criar uma boa primeira impressão por meio do Time to First Paint (TTFP). Esses usuários perceberão seu site como o primeiro quando as páginas HTML forem carregadas rapidamente, cortesia da renderização do lado do servidor.
- SEO aprimorado: mecanismos de pesquisa como Google, Bing e YouTube consideram muitas coisas ao classificar páginas da web. Por exemplo, eles verificarão a experiência do usuário, quanto tempo as pessoas passam em suas páginas e a velocidade de carregamento. O SSR melhora todas essas áreas, o que significa que seu aplicativo provavelmente terá uma classificação mais elevada nos mecanismos de pesquisa.
- Conteúdo dinâmico fácil de manusear: os mecanismos de pesquisa adoram conteúdo dinâmico. Com o SSR, os desenvolvedores agora podem lidar facilmente com conteúdo dinâmico e também personalizar/adaptar o conteúdo com base nas entradas e preferências do usuário.
- Escalabilidade e cache: No SSR, o servidor faz o carregamento inicial, o que reduz a quantidade de processamento que o cliente deve manipular e o torna mais escalável. O SSR também pode usar cache no nível do servidor e na rede de entrega de conteúdo (CDN) para reduzir a carga do servidor e melhorar o desempenho.
Algumas ferramentas e estruturas implementam SSR. Alguns são projetados apenas para oferecer suporte à renderização no lado do servidor, enquanto outros são desenvolvidos para oferecer suporte à renderização no lado do cliente e no servidor. Estes são alguns dos mais comuns com os quais você provavelmente interagirá no mundo do desenvolvimento web:
Vue.js
Vue.js é uma estrutura JavaScript para construção de interfaces de usuário e é construída em JavaScript, HTML e CSS padrão. Com esta estrutura, você pode construir UIs simples e complexas usando seu modelo de programação declarativo e baseado em componentes.
Os componentes Vue, por padrão, produzem e manipulam o Document Object Model (DOM) no navegador como saída. No entanto, esta estrutura também usa SSR para renderizar esses componentes em strings HTML no servidor e enviá-los diretamente ao navegador. Um aplicativo Vue renderizado em servidor é considerado ‘universal’, pois a maior parte do código é executado no servidor e no cliente.
Reagir.js
Reagir é uma biblioteca JavaScript para construção de interfaces de usuário. Esta biblioteca usa um modelo de programação baseado em componentes onde você pode dividir seu aplicativo em pequenos componentes reutilizáveis. O React também é declarativo, tornando o código fácil de prever e depurar.
O React foi projetado para implementar a renderização do lado do cliente e do lado do servidor por padrão. Se você precisar implementar a renderização do lado do servidor em um aplicativo React, deverá configurá-la usando uma estrutura de aplicativo Node.js como Express.js. Você também deve atualizar seus scripts no arquivo package.json para garantir que o aplicativo seja ‘iniciado’ no servidor Express.
Gatsby
Gatsby é uma estrutura baseada em React para construção de sites. Esta estrutura de código aberto foi projetada para ajudar os desenvolvedores a criar aplicativos da web rápidos. Gatsby se integra a vários sistemas de gerenciamento de conteúdo como Drupal e WordPress, facilitando a busca de dados.
Você precisa de um servidor Node.js para configurar renderização do lado do servidor em Gatsby. O SSR é executado na nuvem Gatsby, onde cada solicitação é enviada a um processo de trabalho na função getServerData. Todos os dados do processo de trabalho são passados para o componente React que retorna um documento HTML.
Angular
Angular é uma plataforma de desenvolvimento construída em TypeScript. Esta plataforma possui uma estrutura baseada em componentes que você pode usar para construir aplicativos da web. Você pode usar o Angular para criar aplicativos pequenos e de nível empresarial.
Assim como o React, o Angular não implementa SSR por padrão. No entanto, você pode configurar seu aplicativo Angular para implementar a renderização no servidor combinando-o com Express.js, uma estrutura de back-end node.js. Angular Universal permite renderizar componentes Angular no servidor e reduzir o tempo de carregamento inicial.
Como verificar se um site usa SSR ou CSR
Se você é um desenvolvedor ou profissional de marketing, é difícil determinar se um site usa renderização no servidor ou no lado do cliente quando você o visita. Felizmente, você pode inspecionar um site para determinar a abordagem de renderização que ele usa. Podemos inspecionar nosso site etechpt.com para demonstrar. Clicarei com o botão direito em qualquer página e selecionarei ‘Exibir código-fonte da página’.
Se você puder ver tags como ,
- , terá certeza de que elas estão sendo executadas no lado do servidor.
- Maior complexidade do código: a implementação da renderização no lado do servidor pode exigir configuração adicional no lado do servidor. Tal abordagem pode levar a um aumento da base de código no lado do servidor, dificultando sua manutenção.
- Aumento da carga do servidor: embora tenhamos destacado que o SSR pode melhorar os tempos de carregamento, ele também pode ser um gargalo de desempenho em momentos de alto tráfego. O servidor é responsável por renderizar o conteúdo HTML, o que pode, às vezes, sobrecarregar o servidor ou até mesmo travar.
Limitações da renderização do lado do servidor
A renderização do lado do servidor é igual à marcação do lado do servidor?
Não. A renderização no lado do servidor é uma abordagem de desenvolvimento web em que o servidor envia uma página HTML totalmente carregada para o navegador. O objetivo do SSR é aumentar o tempo de carregamento inicial rápido e melhorar o SEO.
A marcação do lado do cliente é onde todas as análises e rastreamento são feitos no lado do servidor. Quando as tags são tratadas no servidor, o navegador do cliente não precisa mais lidar com tais processos, aumentando a segurança e aumentando o desempenho. Aprenda sobre a marcação do lado do servidor para entendê-la melhor.
Conclusão
A renderização do lado do servidor é uma boa escolha para todos os desenvolvedores web que desejam aumentar o desempenho de seus aplicativos por meio de tempos de carregamento maiores e melhor experiência do usuário.
Por outro lado, se não for bem implementado, o SSR pode ser um desafio, pois torna-se difícil manter o código. No entanto, os benefícios da RSS superam largamente os desafios, razão pela qual muitas organizações a estão a adoptar.
A seguir, você também pode ler sobre os motivos para usar a marcação do lado do servidor em vez da marcação do lado do cliente.