Entenda Server-Side Rendering (SSR) com exemplos práticos!

Apesar de não ser um conceito novo, Server-Side Rendering é um termo bastante utilizado no universo Frontend atualmente, mas muitos não entendem muito bem do que se trata e como funciona.

Nesse vídeo vamos entender o que é SSR, como funciona, e quais são suas vantagens se comparado com o CSR (Client-Side Rendering). Pra facilitar, trouxe 2 exemplos práticos no vídeo, um feito com React e outro com Next 👩‍💻.

Timestamps:

00:00 Introdução
00:32 O que é SSR?
01:06 Client-Side Rendering (CSR)
01:42 Exemplo prático com React (Client-Side Rendering)
05:31 Hydration no SSR
06:09 Exemplo prático com Next (Server-Side Rendering)
09:58 Conclusão

[JapaScript-wlqr]

Só pra complementar, acabei não reforçando tanto esse ponto no vídeo, mas devido ao carremento inicial mais lento do Client-Side Rendering, e ao fato de não termos conteúdo nenhum na página nos momentos iniciais dessa renderização, os mecanismos de busca tem mais dificuldade em indexar nossas páginas, o que prejudica o SEO do nosso site.

Outro ponto é que, atualmente, a arquitetura do Next está um pouco diferente por causa dos React Server Components. Agora, em teoria, o Next não renderiza mais uma página inteira do lado do servidor e depois hidrata ela toda com a interatividade. Isso é feito de forma mais granular e controlada pra cada componente, onde podemos escolher hidratar apenas alguns componentes específicos que necessitam de interatividade. Mas isso é assunto pra outro vídeo, o importante aqui é apenas entender o conceito de SSR 😁.

[leonardoorlandin]

Excelente vídeo e didática bastante clara!!!! No aguardo dos próximos 💪💪
(gostei da camisa 🤣)

[maariiana]

Adoro os seus vídeos! Uma verdadeira aula!!! Parabéns! posta mais

[mxzwrrk]

Amigo, você comunica muito bem e o cabelo ta impecável ksksk

[richardwillian]

Caraca! Muito boa explicação. Meus parabéns!

Além do conteúdo principal do vídeo, aprendi que é possível simular uma internet lenta, coisa que nunca nem imaginava.

Vllw demais 😂