Pré-renderização

3 meses atrás

10 minutos

O que é Pré-renderização?

Pre-renderização (ou pre-rendering) é uma técnica usada no desenvolvimento web para melhorar o desempenho e a experiência do usuário ao gerar e preparar o conteúdo de uma página da web antes que ela seja realmente solicitada pelos usuários. Essa técnica envolve a criação e armazenamento de uma versão estática da página que pode ser rapidamente entregue ao usuário, em vez de gerar a página dinamicamente a partir do zero toda vez que ela é solicitada.

Conceito de Pre-renderização

Geração Antecipada de Conteúdo:
- Definição: A pre-renderização refere-se ao processo de gerar e renderizar o conteúdo de uma página da web no servidor ou no momento da construção do site, para que esteja pronto para ser entregue ao usuário instantaneamente quando solicitado.
- Objetivo: Melhorar o tempo de carregamento e a experiência do usuário, fornecendo uma versão já pronta da página.
Processo:
- Construção no Servidor: O servidor gera a página estática com base nos dados disponíveis e armazena essa versão para futuras solicitações.
- Geração durante o Build: Em sites que usam frameworks modernos, a pre-renderização pode ocorrer no momento da construção do site (build time), gerando páginas estáticas que são servidas aos usuários.

O que é SSR (Server-Side Rendering)?

SSR é a técnica onde o servidor gera o HTML completo de uma página a cada requisição do usuário . O navegador recebe um HTML pronto, com todo o conteúdo visível.

Exemplo prático em PHP:

<?php
$title = "Meu Site";
$posts = ["Notícia 1", "Notícia 2"];
?>
<!DOCTYPE html>
<html>
  <head><title><?= $title ?></title></head>
  <body>
    <h1><?= $title ?></h1>
    <ul>
      <?php foreach ($posts as $post): ?>
        <li><?= $post ?></li>
      <?php endforeach; ?>
    </ul>
  </body>
</html>

Vantagens do SSR:

🚀 SEO amigável : O Google indexa facilmente o conteúdo, pois está no HTML.
⚡ Carregamento rápido : O usuário vê o conteúdo imediatamente.
📱 Compatibilidade : Funciona em dispositivos antigos (não depende de JavaScript).

Hospedagem para SSR:

Compartilhada: Ideal para PHP, Python ou Ruby (ex: Hostinger, GoDaddy).
VPS: Necessário para SSR com Node.js (ex: DigitalOcean, AWS).

O que é CSR (Client-Side Rendering)?

CSR transfere a responsabilidade da renderização para o navegador. O servidor envia um HTML mínimo, e o JavaScript monta a página dinamicamente.

Exemplo em JavaScript:

<!DOCTYPE html>
<html>
  <head><title>Meu Site</title></head>
  <body>
    <div id="app"></div>
    <script>
      // Simula requisição a uma API
      fetch('/api/posts')
        .then(response => response.json())
        .then(data => {
          document.getElementById('app').innerHTML = 
            `<h1>${data.title}</h1><ul>${data.posts.map(p => `<li>${p}</li>`).join('')}</ul>`;
        });
    </script>
  </body>
</html>

Vantagens do CSR:

🔄 Atualizações dinâmicas : Conteúdo muda sem recarregar a página (ex: redes sociais).
📦 Menos carga no servidor : O navegador faz o trabalho pesado.

Desvantagens:

⏳ Carregamento inicial lento : O usuário vê uma tela em branco até o JS carregar.
🚫 SEO complexo : O Google pode não indexar conteúdo gerado por JavaScript.

Hospedagem para CSR:

Compartilhada: Funciona para arquivos estáticos (HTML/JS/CSS).
Serviços especializados: Netlify, Vercel (ideal para SPAs).

SSR vs CSR: Qual escolher?

CRITÉRIOS	SSR	CSR
SEO	✅ Excelente	❌ Requer técnicas extras
Performance inicial	✅ Rápido	⏳ Lento
Interatividade	❌ Limitada	✅ Total
Hospedagem	🖥️ Servidor com PHP/Node.js	📡 Hospedagem estática

Dicas para Escolher a Melhor Opção

Priorize SEO?
→ Use SSR com hospedagem compartilhada (PHP) ou VPS (Node.js).
Precisa de interatividade em tempo real?
→ CSR com frameworks como React ou Vue.
Orçamento limitado?
→ Hospedagem compartilhada + SSR em PHP ou CSR estático.
Site estático (blog, portfólio)?
→ Static Site Generation (SSG) com Jekyll ou Hugo.

Técnicas e Implementações de Pré-renderização

Pré-renderização no Servidor:
- Renderização no Servidor (Server-Side Rendering – SSR): A renderização é feita no servidor antes de enviar a página para o navegador. O servidor gera o HTML completo da página antes de enviá-lo.
- Exemplo: Frameworks como Next.js (para React) suportam SSR, onde a página é gerada no servidor e entregue ao cliente pronta para visualização.
Pré-renderização Estática:
- Geração de Páginas Estáticas: Durante o processo de build do site, as páginas são geradas como HTML estático e armazenadas para serem servidas diretamente ao usuário.
- Exemplo: Utilização de ferramentas como Gatsby, que geram HTML estático a partir de dados e conteúdo durante o build, resultando em páginas prontas para serem servidas rapidamente.
Pre-rendering com Ferramentas e Bibliotecas:
- Ferramentas de Pre-rendering: Existem ferramentas que podem pré-renderizar páginas, gerando HTML estático para rotas específicas, especialmente úteis para páginas dinâmicas.
- Exemplo: prerender.io é um serviço que pode pré-renderizar páginas e melhorar a indexação e o desempenho.
Geração de Páginas no Frontend:
- Renderização no Frontend (Client-Side Rendering – CSR): Embora não seja a pré-renderização tradicional, algumas técnicas de CSR podem envolver pré-carregar dados e recursos para uma renderização mais rápida no frontend.

Pré-renderização na Prática

Static Site Generation (SSG):
- Gera HTML estático no momento do build.
- Exemplo com PHP + SSG:

<?php
// Gerar HTML estático durante o deploy
$posts = get_posts_from_database();  // Busca dados no build
file_put_contents("blog.html", render_template($posts));
?>

Pré-renderização em Frameworks:

Next.js (React) permite gerar páginas estáticas no build:

// next.config.js
module.exports = {
  output: 'export',  // Gera HTML estático
};

Por que Pré-renderizar?

⚡ Velocidade: O HTML já está pronto, sem processamento no servidor.
🔍 SEO Perfeito: Crawlers recebem conteúdo imediatamente.
🔒 Segurança: Menos código dinâmico exposto (ideal para sites estáticos).

Quando Usar Cada Método?

CENÁRIOS	RENDERIZAÇÃO	PRÉ-RENDERIZAÇÃO
Conteúdo dinâmico (ex: redes sociais)	CSR ou SSR	❌ Não recomendado
Blogs, documentação, portfólios	SSG (Pré-renderização)	✅ Ideal
E-commerce com estoque em tempo real	SSR (PHP/Node.js)	❌ Não recomendado

Exemplo Prático em PHP:

Sem Pré-Renderização (SSR):

// index.php (processa dados a cada requisição)
$data = fetch_from_database();  // Lento para alto tráfego
echo "<h1>" . $data['title'] . "</h1>";

Com Pré-Renderização (SSG):

// build.php (executado uma vez no deploy)
$data = fetch_from_database();
file_put_contents("index.html", "<h1>" . $data['title'] . "</h1>");

Pré-renderização Híbrida

Combina SSR para páginas dinâmicas e SSG para conteúdo estático.

Vantagens da Pré-renderização

Redução do Tempo de Carregamento:
- Desempenho: Como o conteúdo já está gerado e armazenado, o tempo necessário para entregar a página ao usuário é reduzido.
Melhoria da Experiência do Usuário:
- Navegação Fluida: As páginas pré-renderizadas estão prontamente disponíveis, resultando em uma navegação mais rápida e sem atrasos.
Benefícios para SEO:
- Indexação: Páginas pré-renderizadas são mais facilmente indexadas por motores de busca, melhorando a visibilidade e a performance SEO.

Desafios e Considerações

Atualização de Conteúdo:
- Conteúdo Dinâmico: Páginas com conteúdo frequentemente atualizado podem exigir uma estratégia para garantir que o conteúdo pré-renderizado esteja sempre atualizado.
Consumo de Recursos:
- Armazenamento e Processamento: A pré-renderização pode aumentar o consumo de recursos no servidor ou durante o processo de build, especialmente para sites com muitas páginas.
Gerenciamento de Cache:
- Armazenamento de Versões: É importante gerenciar o cache e as versões das páginas pré-renderizadas para garantir que os usuários recebam o conteúdo mais recente.

Exemplos de Uso

Sites de Conteúdo:
- Blogs e Artigos: Páginas de blogs e artigos podem ser pré-renderizadas para melhorar a performance e a indexação, já que o conteúdo estático não muda frequentemente.
Lojas Online:
- Páginas de Produtos: Páginas de produtos que têm informações estáticas podem ser pré-renderizadas para fornecer uma experiência de compra mais rápida.
Landing Pages:
- Campanhas de Marketing: Páginas de destino para campanhas de marketing podem ser pré-renderizadas para garantir tempos de carregamento rápidos e uma experiência de usuário suave.

Next.js (Static Generation)

No Next.js, você pode pré-renderizar páginas usando getStaticProps para buscar dados em tempo de construção:

// pages/index.js
export default function Home({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

// Executa em tempo de construção (build)
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts }, // Passa os dados para a página
  };
}

Gatsby (Static Site Generator)

No Gatsby, os dados são buscados e pré-renderizados durante a construção usando GraphQL:

// src/pages/index.js
import { graphql } from 'gatsby';

export default function HomePage({ data }) {
  return (
    <div>
      {data.allPosts.nodes.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

// Consulta GraphQL para buscar dados na construção
export const query = graphql`
  query {
    allPosts {
      nodes {
        id
        title
      }
    }
  }
`;

Nuxt.js (Static Generation)

No Nuxt.js, use generate para criar arquivos estáticos:

<!-- pages/index.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const posts = await fetch('https://api.example.com/posts').then(res => res.json());
    return { posts };
  }
}
</script>

4. Vanilla JavaScript (Pré-renderização Manual)

Gerando HTML estático com um script Node.js antes do deploy:

// build.js (script de construção)
const fs = require('fs');
const axios = require('axios');

(async () => {
  const { data: posts } = await axios.get('https://api.example.com/posts');
  const html = `
    <html>
      <body>
        ${posts.map(post => `<div>${post.title}</div>`).join('')}
      </body>
    </html>
  `;
  fs.writeFileSync('dist/index.html', html);
})();

Ferramentas Populares:

Next.js (React)
Gatsby (React)
Nuxt.js (Vue)
SvelteKit (Svelte)
Hugo/Jekyll (Geradores de sites estáticos)

Em resumo, a pré-renderização é uma técnica que prepara o conteúdo de uma página da web antes que ela seja solicitada pelo usuário, melhorando o desempenho e a experiência do usuário ao fornecer uma versão pronta da página. Pode ser implementada através da renderização no servidor, geração de páginas estáticas durante o build, ou ferramentas especializadas, e oferece benefícios significativos para a velocidade e a otimização de SEO, embora também apresente desafios relacionados à atualização de conteúdo e ao consumo de recursos.

Paulo M Luft

Na Agência Metamídia eu ajudo empresas a ter mais visibilidade para seu negócio, entender melhor seus clientes e trazer mais resultados. Formado em Comunicação Social – Publicidade e Propaganda, Web Design programação e pós-graduação em Marketing.