如何让API接口返回的内容直接显示在HTML源码代码里？

作者：Terry2024.05.22来源：Web前端之家浏览：1040评论:0

关键词：express node

如何让API接口返回的内容直接显示在HTML源码代码里？关于这个问题，估计很多同学没去处理过，因为这个是关系到SEO爬虫是否会抓取到您的新闻列表。

如果您直接用API，然后通过接口去显示，正常您新闻部分的源代码里只有一个<div id="content"></div>的这样代码，看不到完整新闻列表，这样爬虫根本爬不到，所有您的内容不可能会被收录。

那么问题来了，如何把API返回的内容完全显示在HTML源码里呢？今天我们来分析下。

解决问题方案

要让API接口返回的内容直接显示在HTML源码中,可以使用服务器端渲染(Server-Side Rendering, SSR)的方式。这种方式下,页面的初始渲染是由服务器完成的,将渲染好的HTML直接返回给客户端,而不是仅返回数据让客户端自行渲染。

下面是一个简单的示例,使用Node.js和Express框架实现这种功能：

const express = require('express');
const fetch = require('node-fetch');

const app = express();

app.get('/data', async (req, res) => {
  try {
    // 调用API接口获取数据
    const apiResponse = await fetch('https://api.example.com/v1/data', {
      headers: {
        'Authorization': 'Basic your_base64_encoded_credentials'
      }
    });
    const data = await apiResponse.json();

    // 使用EJS模板引擎渲染HTML页面
    res.render('index.ejs', { data: data });
  } catch (error) {
    console.error('Error fetching data:', error);
    res.status(500).send('Error fetching data');
  }
});

app.set('view engine', 'ejs');

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个示例中,我们使用express框架创建了一个Web服务器,并定义了一个/data路由。当用户访问这个路由时,服务器会调用API接口获取数据,然后使用ejs模板引擎渲染一个HTML页面,并将API返回的数据传递给模板。

下面是index.ejs模板的示例:

<!DOCTYPE html>
<html>
<head>
  <title>API Data</title>
</head>
<body>
  <h1>API Data</h1>
  <pre><code><%= JSON.stringify(data, null, 2) %></code></pre>
</body>
</html>

在这个模板中,我们使用<%= %>语法将API返回的数据直接输出到HTML中,并格式化为JSON字符串。

当用户访问/data路由时,服务器会执行上述代码,调用API接口获取数据,然后使用ejs模板引擎渲染HTML页面,最终将渲染好的HTML直接返回给客户端浏览器。这样,API返回的内容就会直接显示在HTML源码中。