Server-Side Rendering

 

 

Por quê?

Como funciona?

Eu preciso?

🧰

🔧

🔨

⚙️

Gabriel
Prates

Front-end @ Studio Sol

gabriel prates

Palco MP3 🎤 🎧

O maior plataforma de artistas independentes do Brasil.

palco mp3

+1.3M Músicas

+120K Artistas

+4B de downloads de músicas

cifra club
palco mp3
studio sol

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

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>
dom

2.CSSOM

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
cssom builder
cssom

3.Render Tree

🌳

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 html
react

SSR

 

 

Como funciona?

🤔

1.Aplicação

react

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.

🤔

Dúvidas?

😊

Obrigado!

Server-Side Rendering:Por quê? Como funciona? Eu preciso?

By Gabriel Prates

Server-Side Rendering:Por quê? Como funciona? Eu preciso?

  • 517
Loading comments...

More from Gabriel Prates