Next.js 14动态生成社交元标签时页面渲染缓慢的解决方案咨询

方法1：通过 Middleware 传递爬虫标识 #

Middleware 是 Next.js 中能直接访问完整请求上下文的层级，适合先做爬虫判断，再把结果传递给页面的 generateMetadata。

步骤：

1. 在项目根目录创建 middleware.ts，捕获所有请求，解析 User Agent 判断是否为社交平台爬虫。
2. 把判断结果通过自定义请求头传递给页面。
3. 在 generateMetadata 中读取这个请求头，决定是否调用后端接口生成元数据。

示例代码：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// 定义社交平台爬虫的 User Agent 特征
const CRAWLER_UAS = [
  'Discordbot',
  'Twitterbot',
  'facebookexternalhit',
  'LinkedInBot',
  'Slackbot',
  'TelegramBot'
];

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent') || '';
  const isCrawler = CRAWLER_UAS.some(ua => userAgent.includes(ua));
  
  // 传递爬虫标识到后续请求
  const response = NextResponse.next();
  response.headers.set('x-is-crawler', isCrawler.toString());
  return response;
}

// 指定需要应用中间件的路由（根据你的需求调整）
export const config = {
  matcher: ['/:path*'],
};

然后在页面的 generateMetadata 中：

// app/[slug]/page.tsx
import { headers } from 'next/headers';

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const headersList = headers();
  const isCrawler = headersList.get('x-is-crawler') === 'true';

  // 仅当是爬虫时才调用后端接口获取元数据
  if (!isCrawler) {
    return {
      title: '默认标题',
      // 其他基础元数据，浏览器端用不到的可以省略
    };
  }

  // 调用后端接口获取动态元数据
  const metaData = await fetch(`https://your-api.com/meta/${params.slug}`).then(res => res.json());
  
  return {
    title: metaData.title,
    openGraph: {
      title: metaData.ogTitle,
      description: metaData.ogDescription,
      images: [metaData.ogImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: metaData.twitterTitle,
      description: metaData.twitterDescription,
      images: [metaData.twitterImage],
    },
  };
}

export default function Page({ params }: { params: { slug: string } }) {
  // 页面组件内容
  return <div>...</div>;
}

方法2：直接在 generateMetadata 中读取 User Agent #

在 Next.js 14 的 App Router 中，generateMetadata 作为 Server Component 的一部分，可以直接调用 headers() 函数获取请求头，从而拿到 User Agent，无需额外的 Middleware。

示例代码：

// app/[slug]/page.tsx
import { headers } from 'next/headers';

const CRAWLER_UAS = [
  'Discordbot',
  'Twitterbot',
  'facebookexternalhit',
  'LinkedInBot',
  'Slackbot',
  'TelegramBot'
];

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const userAgent = headers().get('user-agent') || '';
  const isCrawler = CRAWLER_UAS.some(ua => userAgent.includes(ua));

  if (!isCrawler) {
    return { title: '默认标题' };
  }

  // 调用后端接口获取元数据
  const metaData = await fetch(`https://your-api.com/meta/${params.slug}`).then(res => res.json());
  
  return {
    title: metaData.title,
    openGraph: {
      title: metaData.ogTitle,
      description: metaData.ogDescription,
      images: [metaData.ogImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: metaData.twitterTitle,
      description: metaData.twitterDescription,
      images: [metaData.twitterImage],
    },
  };
}

性能优化补充 #

• 缓存后端接口响应：如果元数据不会频繁更新，可以给 fetch 添加缓存配置，比如 { next: { revalidate: 3600 } }，减少重复请求。
• 精简默认元数据：非爬虫请求返回最少必要的元数据，避免不必要的序列化开销。
• 验证爬虫判断逻辑：测试主流社交平台的爬虫 UA，确保判断准确，避免漏判或误判。

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