rendertron
3.1.0
Observe que este projeto está descontinuado . A renderização dinâmica não é uma abordagem recomendada e há melhores abordagens para renderizar na web.
Rendertron não será mantido ativamente neste momento.
Rendertron é uma solução de renderização de cromo sem cabeça projetada para renderizar e serializar páginas da web em tempo real.
O Rendertron foi projetado para permitir que seu aplicativo da Web Progressive (PWA) sirva o conteúdo correto a qualquer bot que não renderize ou execute o JavaScript. Rendertron é executado como um servidor HTTP independente. O Rendertron renderiza as páginas usando o Chrome sem cabeça, detectando automaticamente quando o seu PWA concluiu o carregamento e serializa a resposta de volta à solicitação original. Para usar o Rendertron, seu aplicativo configura o middleware para determinar se deve procurar uma solicitação para rendertron. O Rendertron é compatível com todas as tecnologias do lado do cliente, incluindo componentes da Web.
Depois de ter o serviço em funcionamento, você precisará implementar a camada de porção diferencial. Isso verifica o agente do usuário para determinar se é necessária a pré -reerência.
Esta é uma lista de middleware disponível para uso com o serviço Rendertron:
Rendertron também é compatível com o middleware prerender.io. Nota: as listas do agente do usuário diferem lá.
GET /render/<url>
O terminal render renderizará sua página e serializará sua página. As opções são especificadas como parâmetros de consulta:
mobile para false . Ativar passando ?mobile para solicitar a versão móvel do seu site.refreshCache : passe refreshCache=true para ignorar os resultados potencialmente em cache e tratar a solicitação como se ainda não estivesse em cache. O novo resultado da renderização é usado para substituir o resultado anterior. GET /screenshot/<url>
POST /screenshot/<url>
O terminal de screenshot pode ser usado para verificar se sua página está renderizando corretamente.
Ambos os terminais suportam os seguintes parâmetros de consulta:
width é padrão para 1000 - especifica a largura do viewport.height padrão é de 1000 - especifica a altura do Viewport.mobile para false . Ativar passando ?mobile para solicitar a versão móvel do seu site.timezoneId - Especifica a renderização para o fuso horário. Opções adicionais estão disponíveis como uma corda JSON no corpo POST . Consulte a documentação de marionetes para obter opções disponíveis. Você não pode especificar os parâmetros type (Padrões para jpeg ) e encoding (padrões para binary ).
GET /invalidate/<url>
O endpoint invalidate removerá o cache entrado para <url> do cache configurado (in-memória, sistema de arquivos ou armazenamento de dados em nuvem).
Ao definir parâmetros de consulta como parte do seu URL, verifique se eles são codificados corretamente. No JS, isso seria encodeURIComponent(myURLWithParams) . Por exemplo, para especificar page=home :
https://render-tron.appspot.com/render/http://my.domain/%3Fpage%3Dhome
O serviço tenta detectar quando uma página é carregada analisando o evento de carga da página, garantindo que não haja excelentes solicitações de rede e que a página tenha tempo suficiente para renderizar.
Há um limite rígido de 10 segundos para renderizar. Certifique -se de não atingir esse orçamento, garantindo que seu aplicativo seja renderizado bem antes que o orçamento expire.
O Chrome sem cabeça suporta componentes da Web, mas o Shadow Dom é difícil de serializar efetivamente. Como tal, o Shady Dom (um calço leve para o DOM de sombras) é necessário para os componentes da Web.
Se você estiver usando os componentes da Web V0 (depreciado), precisará permitir que o Shady DOM renderize corretamente. No Polymer 1.x, que usa componentes da Web V0, Shady DOM é ativado por padrão. Se você estiver usando o Shadow DOM, substitua isso definindo o parâmetro de consulta dom=shady ao direcionar solicitações para o serviço Rendertron.
Se você estiver usando componentes da web v1 e webcomponents-lite.js ou webcomponents-loader.js , defina o parâmetro de consulta wc-inject-shadydom=true ao direcionar solicitações para o serviço rendertron. Este serviço de renderizador forçará os poli -preenchimentos necessários a serem carregados e ativados.
Os códigos de status da URL solicitada inicial são preservados. Se for um 200 ou 304, você pode definir o status HTTP retornado pelo Serviço de Renderização adicionando uma meta.
< meta name =" render:status_code " content =" 404 " /> Para instalar o Rendertron e executá -lo localmente, primeiro instale Rendertron:
npm install -g rendertronCom o Chrome instalado em sua máquina, execute a CLI Rendertron:
rendertronClone e instale dependências:
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run buildCom uma instância local do Chrome instalado, você pode iniciar o servidor localmente:
npm run start gcloud app deploy app.yaml --project <your-project-id>
Rendertron não inclui mais um arquivo do Docker. Em vez disso, consulte a documentação de marionetes sobre como implantar o Run Headless Chrome no Docker.
Ao implantar o serviço, defina variáveis de configuração, incluindo um config.json na raiz. Opções de configuração disponíveis:
timeout Padrão 10000 - Defina o tempo limite usado para renderizar a página de destino.port padrão 3000 - Defina a porta a ser usada para executar e ouvir o serviço Rendertron. Nota Se o processo.env.port estiver definido, ele será usado.host padrão 0.0.0.0 - Defina o nome do host a ser usado para executar e ouvir o serviço Rendertron. Nota Se o processo.env.host estiver definido, ele será usado.width padrão 1000 - Defina a largura (resolução) a ser usada para renderizar a página.height padrão 1000 - Defina a altura (resolução) a ser usada para renderizar a página.reqHeaders padrão {} - Defina os cabeçalhos HTTP adicionais a serem enviados para a página de destino a cada solicitação.cache null padrão - Defina como datastore para ativar o cache no Google Cloud usando o armazenamento de dados usar apenas se implantar no Google Cloud , memory para ativar o cache ou filesystem na memória para ativar o cache baseado em discocacheConfig - Uma matriz de objetos para especificar opções de cacherenderOnly - restrinja o terminal a apenas solicitações de serviço para determinados domínios. Especificado como uma variedade de cordas. por exemplo. ['http://render.only.this.domain'] . Esta é uma correspondência estrita de prefixo, portanto, especifique os protocolos exatos que serão usados (por exemplo, http, https).closeBrowser false - true força o navegador a fechar e reabrir entre cada página renderiza, alguns sites podem precisar disso para impedir que os URLs além do primeiro renderizem respostas nulas retornadas.restrictedUrlPattern null PADRÃO - Defina o restrito para restringir as solicitações correspondentes, dado o padrão regex. cacheDurationMinutes Padrão 1440 - Defina um tempo de expiração em minúsis, padrão para 24 horas. Defina como -1 para desativar a expiração do cachecacheMaxEntries Padrão 100 - Defina o número máximo de entradas armazenadas no método de cache selecionado. Defina como -1 para permitir o cache ilimitado. Se o uso do método de cache de dados do DataStore, definir esse valor acima de 1000 pode levar ao desempenho degradado como a consulta para determinar o tamanho do cache pode ser muito lento. Se você deseja permitir um cache maior no datastore , considere definir isso como -1 e gerenciar o tamanho do seu armazenamento de armazenamento usando um método como este excluindo entradas em massasnapshotDir Padrão <your os's default tmp dir>/renderton - sistema de arquivos Somente o diretório Os arquivos de cache rendertron serão armazenados em Um exemplo de arquivo de configuração especificando um cache de memória, com uma expiração de 2 horas e um máximo de 50 entradas
{
"cache" : "memory" ,
"cacheConfig" : {
"cacheDurationMinutes" : 120 ,
"cacheMaxEntries" : 50
}
}Se você estiver tendo problemas para fazer com que o Chrome sem cabeça funcione em seu ambiente, consulte o guia de solução de problemas para o marionetista.
