next.js 的元数据（如标题、描述、open graph 信息）必须在服务端渲染阶段静态或动态生成，客户端 useeffect 获取的数据无法被爬虫读取；应使用 server components 中的 generatemetadata 函数实现 ssr 时的动态 seo。
next.js 的元数据（如标题、描述、open graph 信息）必须在服务端渲染阶段静态或动态生成，客户端 useeffect 获取的数据无法被爬虫读取；应使用 server components 中的 generatemetadata 函数实现 ssr 时的动态 seo。
在 Next.js App Router 中，元数据（Metadata）本质上是服务端能力——它直接影响 HTML <head> 的初始输出，而搜索引擎爬虫、社交平台分享预览等均依赖服务端直出的静态 HTML。这意味着：任何通过客户端 JavaScript（如 useEffect + fetch）异步获取并更新的元数据，对爬虫完全不可见，即使 NextSeo 在浏览器中成功修改了 DOM，也已于事无补。
✅ 正确做法：在 Server Component 中使用 generateMetadata
这是 Next.js 官方推荐且唯一能保证 SEO 生效的方式。你无需在客户端管理状态，而是直接在路由文件（如 app/assets/[id]/page.tsx）中导出一个异步函数：
// app/assets/[id]/page.tsx
import { notFound } from 'next/navigation';
export async function generateMetadata({ params }: { params: { id: string } }) {
try {
const res = await fetch(`https://api.example.com/assets/${params.id}`, {
cache: 'force-cache', // 或 'no-store' 控制缓存策略
});
if (!res.ok) throw new Error('Asset not found');
const data = await res.json();
return {
title: data.name ?? 'Asset Name',
description: data.description ?? '',
openGraph: {
title: data.name,
description: data.description,
images: data.thumbnail
? [{ url: data.thumbnail, width: 270, height: 270 }]
: [],
},
// 其他 metadata 字段（twitter, robots 等）
};
} catch (err) {
return {
title: 'Asset Not Found',
description: 'The requested asset could not be loaded.',
};
}
}
export default async function AssetPage({ params }: { params: { id: string } }) {
const res = await fetch(`https://api.example.com/assets/${params.id}`);
const data = await res.json();
return (
<main>
<h1>{data.name}</h1>
<p>{data.description}</p>
{data.thumbnail && <img src={data.thumbnail} alt={data.name} />}
</main>
);
}⚠️ 注意事项：
- generateMetadata 必须是 async server function，不能包含客户端逻辑（如 useState、useEffect）；
- 数据请求必须在服务端执行（fetch 默认在 App Router 中为服务端调用），避免使用 client 组件内请求；
- 若需支持 ISR（增量静态再生）或 SSG（静态生成），可结合 revalidate 选项或 generateStaticParams；
- 不要混用 NextSeo（专为 Pages Router 设计）与 App Router 的原生 Metadata —— 后者更轻量、更可靠、完全服务端可控。
? 总结：SEO 不是“客户端更新 DOM”，而是“服务端输出正确 HTML”。放弃在 useEffect 中操作元数据的思路，拥抱 generateMetadata，才能确保你的资产页在微信、LinkedIn、Twitter 等平台分享时显示真实标题与缩略图。
