SSR (Side Server Rendering)

• Renderização do lado do servidor

• A renderização do componente é feita em
segundo plano (mensagem "Carregando...“)
• Existem situações que podem requerer um
processamento maior para a renderização
SSR (Side Server Rendering)
• Solução: técnica SSR
• O processamento e renderização dos
componentes é realizado pelo servidor
• O servidor converte para HTML e retorna o
cliente
• Uma vantagem: indexação em motores de
busca da internet
SSR (Side Server Rendering)
• Vamos construir uma aplicação do lado
servidor!!!!!!!!!
npx create-react-app app6-ssr
• Criar um arquivo Copyright.js para criar um novo
componente
• Alterar o App.js para chamar este componente
SSR (Side Server Rendering)
• Alterar o arquivo index.js para executar o
código no servidor
• Instalar o pacote Express
npm install express
• Criar uma pasta chamada server na raiz do
projeto e nela criar o arquivo index.js (ver
material enviado)
 SSR (Side Server Rendering)
• Para configurar a aplicação para renderizar no servidor
• Instalar as seguintes bibliotecas
npm install webpack-cli webpack-node-externals @babel/core babel-loader
@babel/preset-env @babel/preset-react --save-dev

• Criar arquivos de configuração

• Criar o arquivo “.babelrc.json” (iniciando com ponto)
(ver conteúdo do arquivo repassado na aula)
• Criar o arquivo “webpack.server.js” (ver conteúdo do
arquivo repassado na aula)
SSR (Side Server Rendering)
• O pacote de servidor será enviado para a
pasta “server-build" no arquivo “Index.js”
• Fazer alteração no arquivo “package.json”
(ver arquivo enviado na aula)
• No arquivo “package.json”, são incluídas três
linhas na estrutura de scripts, após a linha
“eject”
SSR (Side Server Rendering)
• Para finalizar, precisamos instalar o nodemom e o
npm-run-all
npm install nodemon npm-run-all --save-dev
• Para executar no servidor
npm run dev

• Observe que isto criou a pasta server-build com o

arquivo index.js dentro
https://recode.org.br