如何配置React服务端渲染？实现动态Meta及社交分享链接

一、搞定Meta信息缓存问题 #

1. 强制浏览器不缓存页面 #

在Node.js的响应头中添加缓存控制规则，让浏览器每次请求都拉取最新页面：

app.get('/', (req, res) => {
  // 设置缓存控制头
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  // 渲染带动态Meta的页面（示例用EJS模板）
  res.render('index', { 
    metaTitle: '动态生成的页面标题', 
    metaDescription: '动态生成的页面描述' 
  });
});

2. 针对社交爬虫的缓存优化 #

Facebook、Twitter的爬虫会缓存抓取到的页面内容，导致分享卡片不更新。可以通过两种方式处理：

• 给页面URL添加动态标识（比如内容ID或时间戳），让爬虫识别这是新内容：
  示例分享URL：https://yourdomain.com/?v=12345（12345为内容ID或随机数）
• 在服务端设置爬虫的缓存时长，避免长期缓存：

app.get('/', (req, res) => {
  const contentVersion = req.query.v || Date.now();
  const metaData = getDynamicMeta(contentVersion); // 自定义函数获取对应Meta
  // 允许爬虫缓存5分钟，超过时间重新抓取
  res.setHeader('Cache-Control', 'max-age=300');
  res.render('index', metaData);
});

3. SPA场景下的前端动态修改Meta #

如果是单页应用，前端路由切换时服务端不会重新渲染，这时候可以用JS动态修改Meta标签（注意：仅对前端用户可见，爬虫可能不执行JS，所以服务端渲染仍是社交分享的最优解）：

// 切换页面时调用此函数更新Meta
function updatePageMeta(title, description, imageUrl) {
  document.title = title;
  // 通用Meta
  document.querySelector('meta[name="description"]').setAttribute('content', description);
  // Open Graph（Facebook用）
  document.querySelector('meta[property="og:title"]').setAttribute('content', title);
  document.querySelector('meta[property="og:description"]').setAttribute('content', description);
  document.querySelector('meta[property="og:image"]').setAttribute('content', imageUrl);
  // Twitter Card
  document.querySelector('meta[name="twitter:title"]').setAttribute('content', title);
  document.querySelector('meta[name="twitter:description"]').setAttribute('content', description);
  document.querySelector('meta[name="twitter:image"]').setAttribute('content', imageUrl);
}

二、动态生成社交分享链接 #

1. Facebook分享链接 #

直接拼接参数即可生成，无需依赖SDK：

function getFacebookShareLink(pageUrl, pageTitle, pageDesc) {
  const encodedUrl = encodeURIComponent(pageUrl);
  const encodedTitle = encodeURIComponent(pageTitle);
  const encodedDesc = encodeURIComponent(pageDesc);
  return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&title=${encodedTitle}&description=${encodedDesc}`;
}

2. Twitter分享链接 #

支持自定义分享文本和话题标签：

function getTwitterShareLink(pageUrl, shareText, hashtags) {
  const encodedUrl = encodeURIComponent(pageUrl);
  const encodedText = encodeURIComponent(shareText);
  const encodedHashtags = encodeURIComponent(hashtags.join(','));
  return `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedText}&hashtags=${encodedHashtags}`;
}

可以在服务端模板中直接调用这些函数生成链接，或者在前端根据当前页面Meta动态生成。

内容的提问来源于stack exchange，提问作者PokerJava