Originalmente, quando os aplicativos de página única não eram uma coisa, cada página era um HTML diferente retornado de uma resposta a uma chamada HTTP. Seja um arquivo de conteúdo estático ou processando a resposta por meio de linguagens do lado do servidor (como PHP, Python ou Java) e respondendo de maneira mais dinâmica.
Os SPAs nos permitiram entregar sites responsivos que funcionam muito mais rápido do que o modelo padrão de solicitação-resposta, removendo o “tempo de viagem de solicitação”.
A resposta típica do servidor ao acessar um site React seria algo assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<title>My React app</title>
</head>
<body>
<div id="root"></div>
<script src="/app.js"></script>
</body>
</html>
Por que isso é um problema?
- A conexão lenta com a Internet pode não carregar com
app.jsrapidez suficiente para ter uma boa experiência do usuário
- Dispositivos lentos, como smartphones mais antigos, podem não ter os tempos de carregamento mais rápidos no código javascript
- Os mecanismos de pesquisa e as redes sociais podem não reconhecer e encontrar o conteúdo do seu site enquanto ele está sendo carregado no lado do cliente
1. Ter suas páginas-chave estáticas
Se você tem um site onde seus usuários podem fazer login e não podem acessar o conteúdo não assinado, você pode decidir criar sites públicos (como o índice, “sobre nós”, “fale conosco” etc.) páginas como HTML estático , e não tê-los renderizados por JS.
Como seu conteúdo é restrito por requisitos de login, ele não será indexado pelos mecanismos de pesquisa ou compartilhado nas mídias sociais.
2. Gere partes do seu aplicativo como páginas HTML ao executar o processo de compilação
Bibliotecas como react-snapshot podem ser usadas para gerar cópias HTML das páginas do seu aplicativo e salvá-las em uma pasta especificada. A pasta pode ser implantada junto com seus outros ativos. Desta forma, o HTML será servido junto com a resposta permitindo que seu site seja acessível por usuários com JavaScript desabilitado, buscadores, redes sociais etc.
Na maioria dos casos, a configuração do react-snapshot é tão simples quanto instalar a dependência em seu projeto e criar um novo script:
"build": "webpack && react-snapshot --build-dir static"
3. Crie um aplicativo renderizado no lado do servidor em JS
Um dos aspectos atraentes da nova geração de aplicações web javascript é que elas podem ser executadas tanto no cliente (navegador) quanto no servidor — isso nos permite gerar HTML para páginas mais dinâmicas — cujo conteúdo não é conhecido na compilação Tempo. Isso é muitas vezes referido como aplicação “isomórfica” ou “universal”.
Duas das soluções mais populares que fornecem SSR para React são:
- next.js —https://github.com/zeit/next.js/
- Gatsby —https://github.com/gatsbyjs/gatsby
Você precisará ser capaz de executar um back-end de nó para seu servidor . Você não pode implantar esta solução em um host estático como páginas do github.
O primeiro passo que vamos dar é criar um aplicativo exatamente como você faria com qualquer outro aplicativo React.
Primeiro, precisaremos adicionar três pacotes:
yarn add express babel-node pug --save-dev
- babel-node é um wrapper para node, que permite realizar transpilação de código em tempo real
- pug é um mecanismo de modelagem que podemos usar com express.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root">!{app}</div>
<script src="bundle.js"></script>
</body>
</html>
Nosso servidor ficará assim
import React from 'react';
import { renderToString } from 'react-dom/server';
import express from 'express';
import path from 'path';
import App from './src/App';
const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
const html = renderToString(
<App />
);
res.render(path.join(__dirname, 'src/index.pug'), {
app: html
});
});
app.listen(3000, () => console.log('listening on port 3000'));
import { renderToString } from 'react-dom/server';
const app = express();
app.set('view engine', 'pug');
app.use('/', express.static(path.join(__dirname, 'dist')));
Em seguida, estamos instruindo o express a procurar o arquivo na distpasta e, se uma solicitação (por exemplo, /bundle.js) corresponder a um arquivo presente nessa pasta, responda com ela.
app.get('*', (req, res) => {});
const html = renderToString(
<App />
);
res.render(path.join(__dirname, 'src/index.pug'), {
app: html
});
app.listen(3000, () => console.log('listening on port 3000'));
Tudo o que resta a fazer é adicionar um script adequado a package.json:
"scripts": {
"server": "babel-node server.js"
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root">div data-reactroot="">
Contents of App.js
</div>
<script src="bundle.js"></script>
</body>
</html>
Embora o SSR pareça principalmente simples, você precisa estar atento a alguns tópicos, que podem não estar claros inicialmente:
- Os ciclos de vida do componente React não são chamados no servidor (
componentDidMount)isso significa que os dados buscados que você está renderizando em tempo de execução não serão SSR; isso geralmente é uma coisa boa, pois você deve fornecer os dados como props se precisar. Lembre-se de que você precisa atrasar sua renderização (chamada res.render) até que os dados sejam buscados, o que pode causar algum atraso para seus visitantes
- qualquer estado gerado no lado do servidor não será passado para o estado do aplicativo cliente; isso significa que se o seu backend buscar alguns dados e usá-los para renderizar HTML, eles não serão colocados no
this.stateque o navegador vê
- se você estiver usando um roteador de reação, você precisa ter certeza de que o URL correto é passado para o aplicativo quando ele é renderizado no servidor.
