Server Components - Front End Day Fortaleza 14/10/2023

Transcript

1. Explorando React Server Components FRONT END DAY FORTALEZA
2. Quem sou eu • Frontend Senior na Chili Piper • 6+ anos de experiência com Frontend e React • React Native • AngularJS & Ionic • Node • Typescript é vida Pro f issional CP Frontend Meetup 
 React Summit - AMS
3. Quem sou eu • Entusiasta de astronomia e computação quântica • Moro com 1 cachorro e 5 gatos • Não gosto de café (desculpa) Pessoal
4. Sobre a talk • Convencer de que RSC é diferente de PHP • Ajudar a diferenciar SSR de RSC • Repassar como streaming e hydration funcionam • Repassar o basico de RSC Objetivos
5. Overview FRONT END DAY FORTALEZA Um pouco da base pra quem tá começando
6. Como a internet funciona? FRONT END DAY FORTALEZA
7. Overview • Navegador (Client) faz uma requisição para o servidor (Server) • Server responde com o arquivo index.html • Client exibe o arquivo para o usuário HTTP & index.html
8. Overview • Depois que o HTML é baixado, o Javascript é responsável por atualizar o conteúdo da página em tempo real • Quando usuário clicar em um botão, então atualize a lista Javascript
9. Overview • Com o tempo, ferramentas que agrupam pedaços de código foram nascendo • React é uma delas • Componentes são pedaços de código que representam um item (ou conjunto de itens) na sua tela React
10. É mais complexo que isso FRONT END DAY FORTALEZA Mas é basicamente isso
11. Voltando aos Server Components FRONT END DAY FORTALEZA Como o componente foi parar no servidor?
12. SSR vs CSR • Server envia arquivo HTML vazio com referência para arquivo JS • Browser baixa o arquivo JS • Browser executa o arquivo • React transforma o HTML vazio na nossa página Client Side Rendering Fronte: https://medium.com/walmartglobaltech/the-bene f its-of- server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8
13. SSR vs CSR • Server pre-renderiza a nossa página e envia o HTML resultante para o browser • Browser exibe o HTML para o usuário • Browser baixa o arquivo JS • Browser executa o arquivo JS • Hydration acontece, página agora é interativa Server Side Rendering Fronte: https://medium.com/walmartglobaltech/the-bene f its-of- server-side-rendering-over-client-side-rendering-5d07 ff 2cefe8
14. Subindo o nível FRONT END DAY FORTALEZA A partir daqui: Se você é iniciante e não acompanhar, tá tudo bem
15. Hydration FRONT END DAY FORTALEZA O que é? O que faz?
16. Hydration • Basicamente rerenderiza a aplicação no client, mas não substitui os nodes no DOM • Adiciona event listeners aos nodes já existentes no DOM • Finalmente, assume a renderização como se fosse uma aplicação client-side Overview Fronte: https://www.patterns.dev/posts/progressive-hydration
17. Hydration • A função "hydrateRoot" do React mapeia os seus componentes para o HTML que foi renderizado no servidor • O HTML renderizado no servidor precisa ser o mesmo renderizado no client Mapeando components para HTML
18. É mais complexo que isso FRONT END DAY FORTALEZA Mas é basicamente isso
19. Streaming FRONT END DAY FORTALEZA O que é? O que faz?
20. Streaming • E se o server pudesse atualizar o HTML enviado pro client em tempo real? • Caso uma request seja feita no servidor, um estado de loading será enviado para o client • Quando a request resolver, o conteúdo f inal será enviado Overview
21. Websockets? FRONT END DAY FORTALEZA Não.
22. Streaming Leitura/escrita de dados em “chunks" (pedaços) NodeJS Streams const Stream = require("stream"); const readableStream = new Stream.Readable({ read() {}, }); readableStream.on("data", (chunk) => { console.log(chunk.toString()); }); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => readableStream.push(“Oi"), 2000); setTimeout(() => readableStream.push("Tchau"), 3000);
23. Streaming Pode ser retornado em uma request HTTP NodeJS Streams const Stream = require("stream"); const readableStream = new Stream.Readable({ read() {}, }); readableStream.on("data", (chunk) => { console.log(chunk.toString()); }); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => readableStream.push(“Oi"), 2000); setTimeout(() => readableStream.push("Tchau"), 3000);
24. Streaming Pode ser retornado em uma request HTTP NodeJS Streams const readableStream = new Stream.Readable({ read() {}, }); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => readableStream.push(“Oi"), 2000); setTimeout(() => readableStream.push("Tchau"), 3000);
25. Streaming Pode ser retornado em uma request HTTP NodeJS Streams app.get("/", (_, res) => { res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", }); const readableStream = new Stream.Readable({ read() {}, }); readableStream.pipe(res); readableStream.push("<!DOCTYPE html><html><body>”); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => readableStream.push("Oi2"), 2000); setTimeout(() => { readableStream.push("Tchau"); readableStream.push("</body></html>"); res.end(); }, 3000); });
26. Streaming Mas ainda falta algo… NodeJS Streams app.get("/", (_, res) => { res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", }); const readableStream = new Stream.Readable({ read() {}, }); readableStream.pipe(res); readableStream.push("<!DOCTYPE html><html><body>”); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => readableStream.push("Oi2"), 2000); setTimeout(() => { readableStream.push("Tchau"); readableStream.push("</body></html>"); res.end(); }, 3000); });
27. Streaming Mas ainda falta algo… NodeJS Streams app.get("/", (_, res) => { res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", }); const readableStream = new Stream.Readable({ read() {}, }); readableStream.pipe(res); readableStream.push("<!DOCTYPE html><html><body>"); setTimeout(() => readableStream.push("Oi"), 1000); setTimeout(() => { readableStream.push("<script>document.body.innerHTML = ‘';</script>"); readableStream.push("Oi2"); }, 2000); setTimeout(() => { readableStream.push("<script>document.body.innerHTML = ‘';</script>"); readableStream.push("Tchau"); readableStream.push("</body></html>"); res.end(); }, 3000); });
28. É mais complexo que isso FRONT END DAY FORTALEZA Mas é basicamente isso
29. Streaming React expõe a função renderToPipeableStream, que envia os rerenders que acontecem no servidor para o client em chunks renderToPipeableStream import { renderToPipeableStream } from "react-dom/server"; const { pipe } = renderToPipeableStream(<App />, { bootstrapScripts: ["/main.js"], onShellReady() { response.setHeader("content-type", "text/html"); pipe(response); }, });
30. React Server Components FRONT END DAY FORTALEZA Sim, tudo até agora era apenas SSR
32. O client pode ser pre- renderizado no server FRONT END DAY FORTALEZA Então a camada de Client acaba rodando no server e no browser
33. Comunicação através de endpoints FRONT END DAY FORTALEZA O server funciona como uma mistura de gateway e router
35. Server Components • Por padrão, toda página é um Server Components • Server Components podem ser async • Somente o HTML renderizado é enviado para o browser Server import React from 'react' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <span>{name}</span> }
36. import React from 'react' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <span>{name}</span> }
37. import React from 'react' async function fetchName() { return 'Lucas' } export default async function Page() { const [name, setName] = React.useState(await fetchName()) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange}/> </> ) }
39. use client FRONT END DAY FORTALEZA
40. import React from 'react' async function fetchName() { return 'Lucas' } export default async function Page() { const [name, setName] = React.useState(await fetchName()) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange}/> </> ) }
41. Código vai pro client Código f ica no server import View from './View' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <View name={name} /> } import React from 'react' export default async function View({ name: serverName }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
42. Código vai pro client Código f ica no server import View from './View' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <View name={name} /> } 'use client' import React from 'react' export default async function View({ name: serverName }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
43. Limitações FRONT END DAY FORTALEZA Props devem ser serializáveis
44. Compondo Client & Server Components
45. import View from './View' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <View name={name} /> } 'use client' import React from 'react' export default async function View({ name: serverName }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
46. import View from './View' async function fetchName() { return 'Lucas' } async function AnotherServerComponent() { const name = await fetchName() return <span>{name}</span> } export default async function Page() { const name = await fetchName() return ( <View name={name}> <AnotherServerComponent /> </View> ) } 'use client' import React from 'react' export default async function View({ name: serverName, children }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> {children} <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
47. Limitações FRONT END DAY FORTALEZA Server components não conseguem acessar dados do client através de props ou context
48. Não é sobre gerar o HTML no server FRONT END DAY FORTALEZA É sobre remover do client tudo que não for interativo
49. Server actions FRONT END DAY FORTALEZA
50. import View from './View' async function fetchName() { return 'Lucas' } export default async function Page() { const name = await fetchName() return <View name={name} /> } 'use client' import React from 'react' export default async function View({ name: serverName }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
51. import View from './View' export default async function Page() { async function generateFullName(name) { 'use server' return `${name} Correia` } return ( <View generateFullName={generateFullName} /> ) } 'use client' import React from 'react' export default async function View({ name: serverName }) { const [name, setName] = React.useState(serverName) function handleChange(e) { setName(e.target.value) } return ( <> <span>{name}</span> <input value={name} onChange={handleChange} /> </> ) }
52. import View from './View' export default async function Page() { async function generateFullName(name) { 'use server' return `${name} Correia` } return ( <View generateFullName={generateFullName} /> ) } 'use client' import React from 'react' export default async function View({ generateFullName }) { const [fullName, setFullName] = React.useState('') // debounce pls async function handleChange(e) { const newFullName = await generateFullName(e.target.value) setFullName(newFullName) } return ( <> <span>{fullName}</span> <input onChange={handleChange} /> </> ) }
53. import View from './View' export default async function Page() { async function generateFullName(name) { 'use server' return `${name} Correia` } return <View generateFullName={generateFullName} /> }
54. Server Actions • Funções não podem ser passadas como props para um Client Component • Server Actions é a exceção, sendo necessário o uso da diretiva "use server” Action import View from './View' export default async function Page() { async function generateFullName(name) { 'use server' return `${name} Correia` } return <View generateFullName={generateFullName} /> }
55. Server Actions • Server Actions não precisam ser passadas como props. Podem ser exportadas/ importadas diretamente • Se passada para um form, será executada mesmo se o javascript do client estiver desabilitado Action 'use client' import React from 'react' export default async function View({ generateFullName }) { const [fullName, setFullName] = React.useState('') // debounce pls async function handleChange(e) { const newFullName = await generateFullName(e.target.value) setFullName(newFullName) } return ( <> <span>{fullName}</span> <input onChange={handleChange} /> </> ) }
56. Server Actions • Server Actions não precisam ser passadas como props. Podem ser exportadas/ importadas diretamente • Se passada para um form, será executada mesmo se o javascript do client estiver desabilitado Action 'use client' import React from 'react' import { generateFullName } from './server-actions' export default async function View() { const [fullName, setFullName] = React.useState('') // debounce pls async function handleChange(e) { const newFullName = await generateFullName(e.target.value) setFullName(newFullName) } return ( <> <span>{fullName}</span> <input onChange={handleChange} /> </> ) }
57. Server Actions • Camada de model isolada no servidor • Reduz dados enviados/ recebidos pela rede • Boa alternativa para um possível BFF/Gateway • Type-safe. São apenas funções! Utilidades 'use server' export async function getName() { const user = await userApi.getUser(...) return user.name } export function setName() { return userApi.setUser({ name }) }
58. Server Actions • Camada de model isolada no servidor • Reduz dados enviados/ recebidos pela rede • Boa alternativa para um possível BFF/Gateway • Type-safe. São apenas funções! Utilidades 'use server' export async function getUserWithWorkspace() { const user = await userApi.getUser(...) const workspace = await workspaceApi.getWorkspace(...) return { user, workspace, } } export function setName() { return userApi.setUser({ name }) }
59. É isso FRONT END DAY FORTALEZA Isso é Server Actions
60. No f im, RSC foi mais simples que SSR FRONT END DAY FORTALEZA
61. Lucas, ainda não estou convencido FRONT END DAY FORTALEZA Então vamos lá…
62. Superpoderes que utilizamos no dia-a-dia FRONT END DAY FORTALEZA
63. Superpoderes • Composição de componentes • Composição de hooks • Injeção de dependência (Context API) 
 que utilizamos no dia-a-dia Fronte: https://alexsidorenko.com/blog/react-prop-drilling-composition/
64. RSC extende seus poderes para a camada de networking e para o server FRONT END DAY FORTALEZA
65. Comparação com PHP FRONT END DAY FORTALEZA Rails, etc inclusos
69. RSC extende não só a ferramenta, mas o paradigma FRONT END DAY FORTALEZA
70. Ideias interessantes na comunidade FRONT END DAY FORTALEZA
72. A mudança de paradigma FRONT END DAY FORTALEZA SPA vs MPA. Client vs Server.
73. Overview • React já quebrou paradigmas no passado • Orientação a Objetos vs Funcional • Two-way data binding vs One- way data f low • JSX React vs AngularJS
74. Obrigado! @tsirlucas em todas as redes sociais