Introdução

Atualmente, praticamente toda aplicação web utiliza algum Framework ou Biblioteca que se baseiam na componentização dos elementos para a construção das telas e suas interações. Com isso, o modo como se desenvolve tem evoluído muito, pois simplificou a aplicação de qualquer tipo de manutenção, além da simplicidade de criar componentes.

Tudo isso é feito com o Client Side Rendering, que serve para renderizar as páginas. No entanto, performaticamente essa não é a melhor opção. Por isso, alguns Frameworks ajuda a contornar esse problema, como por exemplo o Next.js e o Nuxt.js.

Nesse artigo vamos entender quais as diferenças entre Server Side Rendering (SSR) e Client Side Rendering (CSR), e porque a melhor opção para páginas web é o SSR. Preparados?

Client Side Rendering (CSR)

Primeiramente, precisamos entender como o CSR funciona. Quando acessamos uma página o navegador baixa primeiro toda as referências de arquivos que serão necessários. Dessa forma, ele pode seguir uma lógica e entender quais arquivos estão vindo. Em outras palavras, primeiro baixamos a estrutura da página (HTML), depois a parte visual (CSS) e finalmente o JavaScript.

Nessa última parte enfrentamos um problema, pois pode ser que essa parte demore muito para carregar e prejudique a experiência do usuário.

Server Side Rendering (SSR)

Já no SSR não temos esse problema, pois toda a renderização é feito no servidor. Ela entrega a página praticamente pronta para o navegador carregar alguns componentes e realizar o fluxo de navegação. Desse modo, o tempo de acesso à página pelo usuário diminui consideravelmente. Tornando-se algo praticamente instantâneo.

Outro fator que pesa para o SSR ser melhor, é a possibilidade de termos uma melhor indexação. Já que entregamos a página pronta para o navegador, temos um espaço praticamente para SEO e Crawlers.

Fonte: Walmart Global Tech
Fonte: Walmart Global Tech

Conclusão

Basicamente, as vantagens do SSR são: melhor performance e melhor indexação (SEO e Crawlers).

Espero que tenha ficado claro o conceito e diferença entre cada técnica e que isso tenha despertado o interesse sobre buscar mais conhecimento relacionado.

Bons estudos!