> ## Documentation Index
> Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Pré-renderização

> Saiba como a HubSpot pré-renderiza o conteúdo para melhorar a velocidade de carregamento e a segurança da página.

'Saiba como a HubSpot pré-renderiza o conteúdo para melhorar a velocidade de carregamento e a segurança da página.';

Para melhorar a velocidade de carregamento e a segurança da página, a HubSpot cria automaticamente versões estáticas de páginas, postagens de blog e artigos da base de conhecimento sempre que possível. Em outras palavras, em vez de reunir os dados e o layout da página no momento do carregamento da página, a HubSpot renderizará a página com antecedência para que ela esteja pronta para ser veiculada. Cópias dessas páginas pré-construídas são armazenadas no [CDN](https://developers.hubspot.com/docs) da HubSpot ao redor do mundo para que os visitantes possam acessar páginas mais rapidamente com base em sua localização.

Entretanto, nem todas as páginas são elegíveis para pré-renderização. Quando uma página contém determinadas funções ou variáveis do HubL, ou usa determinados recursos de página, isso impedirá que a página seja pré-renderizada. Da mesma forma, em alguns casos, uma página pode ser parcialmente pré-renderizada, o que fornece muitos dos mesmos benefícios de desempenho e segurança da pré-renderização completa.

Abaixo, saiba mais sobre o processo de pré-renderização, como solucionar problemas de pré-renderização e quais recursos afetarão a pré-renderização.

## Processo de pré-renderização

O processo de pré-renderização é acionado automaticamente ao realizar as seguintes ações:

* Publicar uma edição no modelo de uma página
* Atualizando dados compartilhados, como algumas configurações do site
* Atualizando um módulo incluído em um modelo ou página

Durante o processo de pré-renderização, a HubSpot cria uma versão estática da página para que ela esteja pronta para ser veiculada quando seu URL for solicitado. Isso melhora a velocidade de carregamento da página, pois há menos processamento do lado do servidor durante cada solicitação. Em termos de segurança, páginas estáticas reduzem a exposição a potenciais vulnerabilidades associadas a código dinâmico e consultas de banco de dados.

Geralmente, o processo de pré-renderização leva segundos para ser concluído. Alterações maiores, como atualizar um módulo incluído em muitos modelos e páginas, podem levar vários minutos para concluir a renderização da página.

Arquivos CSS, JavaScript e imagens são sempre gerados estaticamente na HubSpot, então eles são sempre pré-renderizados.

<Alert type="info">
  O HubL em arquivos CSS e JavaScript é avaliado apenas uma vez quando o ativo é publicado.
</Alert>

## Verifique se uma página foi pré-renderizada

Há duas maneiras de verificar se uma página foi pré-renderizada:

* `?hsDebugOnly=true`: carregue a página com um parâmetro `?hsDebugOnly=true` de consulta. Isso incluirá uma indicação se a página pode ser pré-renderizada. Se não puder ser pré-renderizado, uma lista de problemas que impedem a pré-renderização será exibida, juntamente com arquivos específicos e números de linhas de modelo. Se a formatação das informações de depuração for difícil de ler, você pode usar o parâmetro `?hsDebug=true` em vez de. Ao inspecionar a página com esse parâmetro de consulta, as mesmas informações de depuração aparecerão em um comentário HTML formatado próximo ao final da página.

![Captura de tela do comentário HTML mostrando que a página pode ser pré-renderizada](https://br.hubspot.com/hubfs/hsDebugTrue-prerender.png)

* `X-HS-Prerendered`: procure o cabeçalho `X-HS-Prerendered` nos cabeçalhos de resposta HTTP da solicitação de página. Este cabeçalho só estará presente se a página for pré-renderizada e incluirá o valor da última vez que a página foi pré-renderizada. Você pode encontrar essas informações inspecionando a página, clicando na guia de rede e observando os cabeçalhos de resposta da solicitação de página.

![guia de rede do Chrome mostrando cabeçalho pré-renderizado](https://br.hubspot.com/hubfs/Knowledge_Base_2023-24-25/chrome-network-tab-prerendered-troubleshooting.png)

<Alert type="tip">
  Sempre que possível, manipule a renderização de conteúdo dinâmico no lado do cliente usando JavaScript. Você também pode usar [funções sem servidor](https://developers.hubspot.com/docs) para extrair dados dinâmicos.
</Alert>

## Recursos incompatíveis

As seguintes variáveis HubL, funções HubL e recursos de conteúdo impedirão que uma página seja pré-renderizada. Esses recursos impedem que a mesma resposta seja exibida para todos os usuários, impedindo assim a exibição de uma página estática pré-renderizada. As páginas que utilizam alguns desses recursos podem ser veiculadas usando [pré-renderização parcial](#partial-prerendering).

### Variáveis HubL incompatíveis

* `account`
* `company`
* `contact`
* `local_dt`
* `owner`
* `request_contact`
* `request.cookies`
* `request.full_url`
* `request.headers`
* `request.path_and_query`
* `request.query`
* `request.query_dict`
* `request.referrer`
* `request.remote_ip`

Note que, embora as `request` variáveis não sejam compatíveis com a pré-renderização, elas geralmente têm [Alternativas ao JavaScript](#javascript-alternatives-to-incompatible-hubl) que você pode usar para acessar informações semelhantes.

### Funções HubL incompatíveis

* `personalization_token()`
* `today()`

### Funcionalidades incompatíveis

* Páginas que usam [testes adaptativos](https://knowledge.hubspot.com/pt/website-and-landing-pages/create-adaptive-tests-for-pages)
* Páginas que incluem [conteúdo inteligente](https://knowledge.hubspot.com/pt/website-and-landing-pages/create-and-manage-smart-content-rules) são suportados via [pré-renderização parcial](#partial-prerendering).

## Pré-renderização parcial

A pré-renderização parcial permite que a HubSpot veicule páginas parcialmente pré-renderizadas. Por exemplo, uma página pode ser totalmente estática, exceto pelo nome de um contato exibido na página. A página pode ser pré-renderizada, exceto pelo nome do contato. Pouco antes de retornar a página ao usuário, a HubSpot executará uma renderização apenas desses valores dinâmicos.

Páginas que usam pré-renderização parcial não podem ser armazenadas em cache no CDN ou no navegador. No entanto, páginas parcialmente pré-renderizadas são mais rápidas de entregar do que páginas que não podem ser parcialmente pré-renderizadas. Páginas parcialmente pré-renderizadas também têm a capacidade de retornar a um estado não personalizado em caso de interrupção ou ataque.

Embora a pré-renderização parcial possa ajudar na velocidade e confiabilidade do seu site, remover os recursos do HubL que tornam as páginas não pré-renderizáveis terá um efeito positivo muito maior no desempenho geral da sua página.

### Verifique se há pré-renderização parcial

Para verificar se uma página pode ser parcialmente pré-renderizada, carregue a página com um parâmetro `?hsPrcDebug=true` de consulta, e haverá uma saída adicional sobre o conteúdo pré-renderizado para essa página. Se a página for pré-renderizada, o cabeçalho `X-HS-Prerendered` estará presente e conterá `partial` antes do momento em que a página foi parcialmente pré-renderizada.

Abaixo está uma lista de variáveis e filtros do HubL que atualmente são suportados com pré-renderização parcial. As páginas que incluem essas variáveis e filtros serão parcialmente pré-renderizadas, e quaisquer expressões que os incluam serão avaliadas no momento da exibição.

### Variáveis HubL

* `account`
* `company`
* `contact`
* `local_dt`
* `owner`
* `query`
* `request`
* `request_contact`
* `year`

### Filtros HubL

* `|random`
* `|shuffle`

## Alternativas JavaScript para HubL incompatível

Enquanto os várias variáveis HubL `request` não são compatíveis com pré-renderização; essas variáveis geralmente têm alternativas JavaScript que você pode usar para acessar informações semelhantes.

Por exemplo, em vez da variável`request.cookies`, você pode usar a [propriedade de cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie). Abaixo está um exemplo de uso do HubL vs. JavaScript para exibir conteúdo dinamicamente com base na experiência do usuário com o site (com base em seus cookies).

<Tabs defaultSelected="0">
  <Tab tabId="0" title="Método HubL">
    ```html theme={null}
    {% set hubspot_utk = request.cookies.hubspotutk %} {% if hubspot_utk %}
    <div class="returning-visitor">
      <h2>Welcome back!</h2>
      <p>Thanks for returning. Here's what's new since your last visit:</p>
      <ul class="updates-list">
        <li>New product features launched</li>
        <li>Updated pricing plans</li>
      </ul>
    </div>
    {% else %}
    <div class="new-visitor">
      <h2>Welcome to our site!</h2>
      <p>New here? Check out our Get Started guide:</p>
      <a href="" class="btn btn-primary">Get Started</a>
    </div>
    {% endif %}
    ```
  </Tab>

  <Tab tabId="1" title="Método JS">
    ```html theme={null}
        <div id="visitor-welcome">
        <div id="new-visitor-content">
        <h2>Welcome to our site!</h2>
        <p>New here? Start with our Get Started guide:</p>
        <a href="" class="btn btn-primary">Get Started</a>
      </div>

      <div id="returning-visitor-content" style="display: none;">
        <h2>Welcome back!</h2>
        <p>Thanks for returning. Here's what's new since your last visit:</p>
        <ul class="updates-list">
          <li>New product features launched</li>
          <li>Updated pricing plans</li>
        </ul>
      </div>
    </div>

    <script>
      function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
          return parts.pop().split(';').shift();
        }
        return null;
      }

      function personalizeForVisitor() {
        const hubspotUtk = getCookie('hubspotutk');
        const newVisitorContent = document.getElementById('new-visitor-content');
        const returningVisitorContent = document.getElementById('returning-visitor-content');

        if (hubspotUtk) {
          // Returning visitor
          newVisitorContent.style.display = 'none';
          returningVisitorContent.style.display = 'block';
        }
        // New visitor content is already visible by default
      }

      // Run immediately to minimize content flash
      personalizeForVisitor();
    </script>
    ```
  </Tab>
</Tabs>

## Recursos relacionados

* [Otimizando o desempenho do site CMS Hub](/cms/best-practices/testing-staging-performance/speed)
* [Usando frameworks e bibliotecas JavaScript na HubSpot](/cms/start-building/introduction/developer-environment/js-frameworks)