Server-Side Rendering
Por quê?
Como funciona?
Eu preciso?
🧰
🔧
🔨
⛏
⚙️
Gabriel
Prates
Front-end @ Studio Sol
Palco MP3 🎤 🎧
O maior plataforma de artistas independentes do Brasil.
+1.3M Músicas
+120K Artistas
+4B de downloads de músicas
Bora lá...
Mas antes, alguns conceitos importantes
👍
🖥
Como se entrega uma aplicação web para um browser???
1.Request
🙏 Você tem que pedir
2.Server
⏳ Esperar um pouco...
O servidor recebe a
requisição e "faz alguma
coisa"; enquanto isso você espera
3.Response
🤲 A resposta do servidor chega no browser
Um pouquinho mais sobre HTTP:
HTTP: tem por que, tem pra que e é necessário entender!
🧙♂️
O que o browser faz com tudo isso?
Critical Rendering
Path
1.DOM
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
2.CSSOM
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
3.Render Tree
🌳
A partir da raiz da árvore DOM, percorre cada nó visível
4.Layout
Determina onde e como os elementos estão posicionados na página, determinando a largura e a altura de cada elemento e onde estão em relação um ao outro
🏢
5.Paint
Converte a Render Tree em pixels na tela. No first load, a tela inteira é pintada; depois disso, só as áreas impactadas na tela sofrem re-paint
🎨
Aplicação JS
Client-Side Rendering:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aplicação super enorme com HTML pequeno</title>
</head>
<body>
<div id="root"></div>
<script src="/dist/main.js" charset="utf-8"></script>
</body>
</html>💸
Renderizar pode ser muito caro...
O browser precisa:
-
Baixar todo HTML, CSS e JavaScript necessário
-
Interpretar e processar tudo isso
-
Renderizar
Operar no DOM e alterar toda sua estrutura
Time to Interactive
Tempo para a página se tornar totalmente interativa; depois que o layout se estabilizou, e a main thread está disponível
First Meaningful Paint
Mede quando o conteúdo principal de uma página está visível; paint efetuado após a maior alteração de layout
⏱
🏃♂️
Como entregar conteúdo relevante rapidamente?
Server-Side Rendering
🎊
🎉
👀
Gera o HTML completo da página no servidor em resposta à navegação
Os dados são requisitados e tratados antes que o navegador obtenha uma resposta
Tempo do
First Meaningful Paint diminui drasticamente
SSR
Como funciona?
🤔
1.Aplicação
2.Server
Servidor com Express que irá receber as requisições e processar todo conteúdo
3.Juntar tudo e:
#SQN
Serão 2 aplicações
{ target: "node" }
{ target: "web" }
O servidor precisa:
-
Receber a requisição
-
Montar/processar a aplicação e transformar tudo em uma string de HTML (ReactDOMServer.renderToString)
-
Enviar a resposta para o usuário
O output "node" será usado pelo Express
Resolver as pendências de dados externas
(ex.: chamadas de APIs)
Time to First Byte
A duração entre a solicitação HTTP do client até o primeiro byte da página que está sendo recebida
Quanto mais demandar de recursos externos, mais irá demorar!
⚠️
🚰
Hydration
Dar vida ao conteúdo servido
🎲
Re-hydration de dados
Os dados utilizados para alimentar a aplicação no server servirão como bootstrap de dados do client
🕺
App re-hydration
O React tentará ligar os event listeners à marcação HTML existente
Problema:
😰
Uma aplicação pelo preço de duas
Entregar somente o necessário:
Code Splitting
+
Lazy Load
✂️
👀
Preciso de SSR???
Just because server rendering can make something show up sooner doesn't suddenly mean you have less work to do.