Como gerar sites estáticos com React

O React costuma ser usado para criar aplicativos da web dinâmicos que respondem à entrada do usuário, mas também é bastante útil para sites estáticos. Os sites React podem até ser pré-gerados durante o processo de construção para economizar milissegundos preciosos durante o carregamento da página.

O que é um site estático?

Sites estáticos são HTML entregues diretamente ao usuário, em vez de gerar a página para cada solicitação. Por exemplo, este artigo que você está lendo foi gerado dinamicamente pelo WordPress conversando com um banco de dados, o que fez com que o código PHP renderizasse parágrafos de HTML.

React é uma estrutura popular usada para criar aplicativos da web dinâmicos. Ele divide o HTML em arquivos de componente usando um formato chamado JSX e usa JavaScript para renderizar páginas dinamicamente. É muito útil, mas há um problema — os tempos de carregamento são muito mais longos do que as páginas básicas sem JavaScript. O React funciona carregando um arquivo bundle. js no cliente, que renderiza a página, mas isso leva tempo. O tempo de carregamento da página afeta diretamente a experiência do usuário e, em sites importantes, como páginas de destino, cada milissegundo pode afetar diretamente a receita.

Para corrigir isso, o React tem algumas ferramentas de terceiros para gerar sites estáticos. A ideia básica é que em vez de renderizar no lado do cliente, ele renderiza na máquina do dev durante o processo de compilação, economizando tempo de carregamento. Em seguida, você pega o HTML deste site estático e o veicula como uma página da web normal.

A questão então é: por que se preocupar em fazer todo esse esforço para usar uma estrutura JavaScript totalmente desenvolvida como React, para um aplicativo não-web que não vai mudar? Bem, embora a página não mude para cada solicitação do usuário, as páginas da web geralmente não permanecem as mesmas com o tempo. A maioria das empresas atualiza seus sites com frequência, como sempre que você lança um novo produto, faz uma promoção ou apenas deseja atualizar as coisas para uma nova aparência.

Publicidade

O benefício que o React oferece é uma atualização de código muito mais fácil em comparação a não usar um framework. Se você estiver apenas criando seu site com HTML e CSS, precisará trabalhar mais para fazer pequenas alterações de estilo e muito trabalhar para fazer grandes alterações nos modelos. Com o React, mesmo se você usar o mesmo componente várias vezes, basta atualizar o arquivo de um componente e ele aplicará as alterações onde quer que você o use em seu projeto.

Claro, não é para todos, já que o React requer um bom conhecimento de JavaScript para ser usado corretamente. Como alternativa, se você está apenas procurando fazer um site simples que não seja difícil de atualizar, você deve procurar um Sistema de gerenciamento de conteúdo (CMS) como o SquareSpace ou mesmo o WordPress.

Existem alguns competidores “ React Static ” frameworks por aí, que muitas vezes trazem funcionalidade adicional e controle adicional que é útil para grandes aplicativos de produção. Gatsby é muito popular, assim como Next. js. Neste guia, usaremos o react-static, que apenas fornece uma maneira simples e leve de gerar sites estáticos e é fácil de usar para iniciantes.

Uma observação antes de começarmos: como a renderização acontece no lado do cliente (a menos que você esteja usando a renderização do lado do servidor), o React é tecnicamente “ estático ” no que diz respeito ao seu servidor web. Os arquivos que você hospeda em seu servidor da web não mudam em resposta a solicitações como o PHP faria. No entanto, isso é basicamente um detalhe técnico, porque as páginas ainda são renderizadas dinamicamente, apenas no cliente.

Usando React-Static

react-static é muito fácil de usar. Primeiro, você precisará instalar o Node. JS e o NPM em sua máquina. react-static é simplesmente um pacote NPM, que você pode instalar globalmente:

 npm i -g react-static 

Em seguida, você pode executar a ferramenta de criação de projeto:

 criação reativa estática 

Dê um nome ao seu projeto e selecione o modelo a ser usado. O modelo “ básico ” opção é JS padrão, mas também há uma variante do TypeScript, que muitas pessoas preferem em vez do JavaScript padrão para projetos maiores. Se você estiver mais familiarizado com as linguagens digitadas estaticamente, escolha TypeScript; caso contrário, selecione “ básico. ”

Publicidade

Isso levará um segundo para instalar algumas dependências do NPM e configurar o projeto. Os arquivos principais estão em / src /, com index. jsx sendo a própria raiz do aplicativo e App. jsx sendo o roteador primário que controla quais páginas o usuário vê. Em / dist /, você definirá a saída da compilação (depois de executá-la) que colocará em seu servidor da web.

No App. jsx, você encontrará o início da renderização. O componente Roteador renderiza cada página em / src / pages /, dependendo da URL. A configuração para isso é tratada em static. config. js.

Na verdade, você pode ter rotas dinâmicas em seu aplicativo — qualquer rota configurada com a opção < Dinâmica / > componente não será afetado pelo renderizador estático.

Para iniciar o aplicativo, você pode iniciar o servidor de desenvolvimento:

 npm run start 

Para executar um build a ser implantado em seu servidor da web, execute build:

 compilação de execução npm 

Os arquivos de saída estarão em / dist /. Obviamente, você encontrará cada página HTML a ser renderizada com antecedência, com todas as páginas dinâmicas ainda carregando os binários do React.