Next.js 13中如何预加载API获取的SEO标签（标题、元描述）？

1. 切换到静态生成（getStaticProps）+ 增量静态再生（ISR） #

如果你的SEO内容不需要实时更新（比如按天/小时维度更新），推荐用getStaticProps在构建阶段预获取SEO内容，直接生成带完整SEO标签的静态页面。用户访问时会直接拿到成品页面，完全没有加载延迟。如果需要定期更新内容，开启增量静态再生即可指定页面重新生成的时间间隔。

修改后的代码示例：

const Index = ({ seoTags }) => {
    return (
        <>
            <Head>
                <title>{seoTags[0]?.meta_title || '默认页面标题'}</title>
                <meta name="robots" content={seoTags[0]?.meta_robots || 'index, follow'} />
                <meta name="description" content={seoTags[0]?.meta_description || '默认页面描述'} />
                <meta name="title" content={seoTags[0]?.meta_title || '默认页面标题'} />
            </Head>
            {/* 页面其他内容 */}
        </>
    )
}
export default Index;

export async function getStaticProps() {
  let seoTags = [];
  try {
    const response = await fetch(`https://test.com/rest/V1/homepage-titles`);
    if (response.ok) {
      seoTags = await response.json();
    }
  } catch (e) {
    console.error('获取SEO内容失败:', e);
  }

  return {
    props: { seoTags },
    // 每24小时重新生成页面，可根据实际需求调整时间
    revalidate: 86400,
  };
}

2. 给getServerSideProps添加缓存层 #

如果必须保留服务端渲染（比如SEO内容是实时动态的），可以在请求层面加缓存，减少重复请求的耗时：

• 用内存缓存（如lru-cache）存储已获取的SEO内容，设置合理的过期时间
• 或者在后端API服务本身部署缓存（如Redis），从根源缩短响应时长

示例（基于lru-cache实现）：

import LRU from 'lru-cache';

// 缓存100条数据，过期时间1小时
const seoCache = new LRU({ max: 100, ttl: 3600 * 1000 });

export async function getServerSideProps(context) {
  let seoTags = seoCache.get('homepage-seo');
  
  if (!seoTags) {
    try {
      const response = await fetch(`https://test.com/rest/V1/homepage-titles`);
      if (response.ok) {
        seoTags = await response.json();
        seoCache.set('homepage-seo', seoTags);
      }
    } catch (e) {
      console.error('获取SEO内容失败:', e);
      seoTags = [];
    }
  }

  return {
    props: { seoTags },
  };
}

3. 预设兜底SEO内容 #

给所有SEO字段添加默认值，即使API请求超时或失败，页面也能展示基础的标题和描述，避免分享链接时出现空白：
如上面代码示例中，用||运算符给每个标签设置兜底内容，确保页面始终有合法的SEO信息。

4. 优化后端API性能 #

如果有权限调整后端服务，直接优化SEO接口的响应速度是最根本的解决办法：

• 简化数据库查询逻辑，避免不必要的关联查询
• 给查询字段添加数据库索引
• 后端提前预计算并缓存SEO内容，减少实时计算开销

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