Pré-renderizar rotas com o React-snap

Não renderiza no lado do servidor, mas ainda quer acelerar o desempenho do seu site do React? Experimente a pré-renderização.

Houssein Djirdeh

react-snap é um terceiro que pré-renderiza as páginas do seu site em arquivos HTML estáticos. Isso pode melhorar First Paint vezes no aplicativo.

Veja uma comparação do mesmo aplicativo com e sem pré-renderização carregados em uma conexão 3G simulada e em um dispositivo móvel:

Uma comparação de carregamento lado a lado. A versão que usa a pré-renderização é carregada 4,2 segundos mais rápido.

Por que isso é útil?

O principal problema de desempenho com grandes aplicativos de uma única página é que O usuário precisa aguardar a conclusão dos pacotes JavaScript que compõem o site. antes que possam ver qualquer conteúdo real. Quanto maiores os pacotes, mais tempo o usuário terá que esperar.

Para resolver isso, muitos desenvolvedores usam a abordagem de renderizar o aplicativo servidor em vez de apenas inicializá-lo no navegador. Com cada transição de página/rota, o HTML completo é gerado no servidor e enviado ao navegador, o que reduz os tempos da First Paint, mas custa uma experiência Tempo até o primeiro byte.

A pré-renderização é uma técnica separada e menos complexa que o servidor renderização, mas também fornece uma maneira de melhorar os tempos da First Paint em seus para o aplicativo. Um navegador headless ou sem uma interface do usuário é usado para gerar arquivos HTML estáticos de cada rota durante o tempo de build. Esses arquivos podem ser enviados junto com os pacotes JavaScript necessários para a para o aplicativo.

clique de reação

O react-snap usa o Puppeteer para criar arquivos HTML pré-renderizados de diferentes rotas no aplicativo. Para comece, instale-o como uma dependência de desenvolvimento:

npm install --save-dev react-snap

Em seguida, adicione um script postbuild em package.json:

"scripts": {
  //...
  "postbuild": "react-snap"
}

Isso executaria automaticamente o comando react-snap sempre que um novo build do das candidaturas feitas (npm build).

A última coisa que você precisa fazer é mudar a forma como o aplicativo é inicializado. Mude o arquivo src/index.js para o seguinte:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Em vez de usar apenas ReactDOM.render para renderizar o elemento raiz do React diretamente no DOM, ele verifica se algum nó filho já está presente para determinar se o conteúdo HTML foi pré-renderizado (ou renderizado no do servidor). Se esse for o caso, ReactDOM.hydrate é usado para anexar o evento ouvintes ao HTML já criado em vez de criá-lo novamente.

A criação do aplicativo vai gerar arquivos HTML estáticos como payloads para cada rota rastreada. Confira a aparência do payload HTML por exemplo, clicando no URL da solicitação HTML e, em seguida, no botão Visualizações no Chrome DevTools.

Uma comparação de antes e depois. A sequência mostra que o conteúdo foi renderizado.

Flash de conteúdo sem estilo

Embora o HTML estático agora seja renderizado quase imediatamente, ele ainda sem estilo por padrão, o que pode causar o problema de mostrar um "flash de imagens conteúdo" (FOUC). Isso pode ser bem perceptível se você estiver usando um CSS-in-JS para gerar seletores, já que o pacote JavaScript terá que concluir em execução antes que qualquer estilo possa ser aplicado.

Para evitar isso, o CSS crítico ou a quantidade mínima de CSS necessária necessários para a renderização da página inicial, podem ser inline diretamente com o <head> do documento HTML. react-snap usa outra biblioteca de terceiros no capuz, minimalcss, para extrair CSS essencial para diferentes rotas. É possível ativar isso especificando o seguindo em seu arquivo package.json:

"reactSnap": {
  "inlineCss": true
}

A visualização da resposta no Chrome DevTools agora vai mostrar a página estilizada com CSS essencial inline.

Uma comparação de antes e depois. A sequência mostra que o conteúdo foi renderizado e está estilizado devido ao CSS crítico embutido.

Conclusão

Se você não estiver renderizando rotas do lado do servidor no aplicativo, use react-snap para pré-renderizar o HTML estático para seus usuários.

  1. Instale-o como uma dependência de desenvolvimento e comece apenas com o configurações.
  2. Use a opção experimental inlineCss para inserir CSS essencial inline, se funcionar para seu site.
  3. Se você estiver usando a divisão de código no nível de um componente em qualquer rota, cuidado para não pré-renderizar um estado de carregamento para os usuários. A LEIA-ME react-snap aborda isso com mais detalhes.