1 min de leitura ·

Ajuda 🆘 Como transformar conteúdo html dinâmico em html estático

Olá meus nobres, Como transformar conteúdo** html dinâmico** em html estático por exemplo eu tenho um blog toda vez que o usuário entra na rota article/id o html e gerado dinamicamente de acordo com o conteúdo do banco de dados, mais não tem necessidade de fazer isso toda hora, e também os mecanismos de buscas não encontram html dinâmicos, alguém pode me ajudar?
estou usando o

nodejs
express
sequelize.
mysql.
body-parser.
slugify.
ejs,entre outras dependências

EdsonFerreira

11 meses atrás

E ai meu chapa! vc quer transformar seu conteúdo HTML dinâmico em HTML estático para melhorar o desempenho e a indexação pelos motores de busca, certo? Vou te dar uma ideia de como fazer isso usando o Node.js, Express, Sequelize e algumas das suas dependências.

Gere HTML Estático no Backend:
- Crie uma rota no Express que represente a página do artigo, por exemplo, /article/:id.
- Quando um usuário acessa essa rota, em vez de gerar o HTML dinamicamente, você vai buscar o conteúdo correspondente no banco de dados usando o Sequelize.
- Em seguida, você pode usar um mecanismo de template (como o EJS, Handlebars ou Pug) para renderizar o conteúdo do artigo em uma página HTML estática.

Exemplo com EJS:

app.get('/article/:id', async (req, res) => {
  const article = await Article.findByPk(req.params.id); // Supondo que você tenha um modelo "Article" definido com Sequelize
  res.render('article', { article }); // Renderize um template EJS com os dados do artigo
});

Renderização de Conteúdo:
- Crie um template EJS (ou outro mecanismo de template de sua escolha) que represente a estrutura da página de artigo.
- Preencha o template com os dados do artigo que você buscou do banco de dados.
- Use o slugify para criar URLs amigáveis para SEO.

Exemplo do template EJS (article.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= article.title %></title>
</head>
<body>
  <h1><%= article.title %></h1>
  <div class="content">
    <%= article.content %>
  </div>
</body>
</html>

Caching:
- Para evitar gerar HTML estático a cada solicitação, você pode implementar um mecanismo de caching. Armazene as páginas HTML estáticas em cache por um período definido (por exemplo, 24 horas) e sirva-as diretamente se estiverem disponíveis no cache.
SEO:
- Certifique-se de que seu aplicativo esteja configurado para fornecer os metadados adequados (título, descrição, tags, etc.) para melhorar a indexação pelos mecanismos de busca.

Lembre-se de atualizar o conteúdo estático sempre que um novo artigo for adicionado ou um existente for modificado no banco de dados. Isso garantirá que seu conteúdo estático esteja sempre atualizado.

Espero que isso tenha ajudado. Se tiver mais perguntas, é só chamar! 😄

LucasWeirich

11 meses atrás

Transformar conteúdo HTML dinâmico em HTML estático é uma estratégia comum para melhorar o desempenho e a indexação de mecanismos de busca de um site. Você pode criar versões estáticas de suas páginas dinâmicas e servir essas versões quando apropriado. Aqui está uma abordagem geral para fazer isso com Node.js, Express e suas outras dependências:

Gerar HTML Estático:

Crie uma função ou método que gera o conteúdo HTML de suas páginas dinâmicas com base nos dados do banco de dados. Por exemplo, você pode ter uma função que aceita o ID do artigo e recupera os dados do banco de dados, depois gera o HTML.
Salvar HTML Estático:

Após gerar o HTML, você pode salvá-lo em um arquivo em um diretório específico do seu servidor. Você pode usar o módulo fs (File System) do Node.js para isso.

const fs = require('fs');

// Gerar e salvar HTML estático
function generateAndSaveStaticHTML(articleId, htmlContent) {
  const staticHTMLPath = `./static/article_${articleId}.html`;
  fs.writeFileSync(staticHTMLPath, htmlContent);
}

Servir HTML Estático:
Configure o Express para verificar se uma versão estática da página existe antes de gerar dinamicamente. Se o arquivo HTML estático existir, sirva-o diretamente. Caso contrário, gera o HTML dinamicamente como você faz atualmente.

app.get('/article/:id', (req, res) => {
  const articleId = req.params.id;
  const staticHTMLPath = `./static/article_${articleId}.html`;

  // Verificar se o arquivo HTML estático existe
  if (fs.existsSync(staticHTMLPath)) {
    // Servir HTML estático
    const staticHTML = fs.readFileSync(staticHTMLPath, 'utf-8');
    res.send(staticHTML);
  } else {
    // Gere o HTML dinamicamente e salve-o
    const dynamicHTML = generateDynamicHTML(articleId);
    generateAndSaveStaticHTML(articleId, dynamicHTML);
    res.send(dynamicHTML);
  }
});

Atualização e Limpeza:

Implemente um mecanismo para atualizar os arquivos HTML estáticos sempre que o conteúdo mudar no banco de dados. Isso pode ser feito usando gatilhos de banco de dados, cron jobs ou eventos de atualização no seu aplicativo. Além disso, implemente um mecanismo para limpar ou atualizar periodicamente os arquivos HTML estáticos que não são mais necessários.
Cache de Conteúdo Estático:

Considere implementar um sistema de cache para o conteúdo estático para melhorar o desempenho e reduzir a carga no servidor.
Lembre-se de que essa é uma abordagem simplificada e você pode ajustá-la de acordo com os requisitos específicos do seu aplicativo. Além disso, certifique-se de que o diretório onde você armazena os arquivos HTML estáticos não seja acessível publicamente para evitar problemas de segurança.