主题
Next.js 原理与运行时
Next.js generateMetadata 如何处理动态 SEO 和元数据流式输出？
元数据既影响搜索和分享，也会参与请求链路；高级实现要兼顾动态数据、缓存、爬虫和首屏延迟。
适合阶段：资深前端 / SEO 工程核心能力：Metadata · SEO · Streaming
面试官想考什么
- 静态 metadata 和 generateMetadata 怎么选？ 考察运行时成本。
- metadata 可以读取页面数据吗？ 考察请求复用和瀑布。
- 动态 metadata 流式输出会影响爬虫吗？ 考察平台和爬虫差异。
- 用户可控 title 如何防注入？ 考察安全和规范化。
一句话回答
text
静态 metadata 适合固定信息，generateMetadata 适合依赖路由或数据的页面；动态 metadata 要复用数据请求、控制超时和缓存，并针对 HTML、爬虫、社交分享和用户输入分别验证最终输出。面试回答详解
1. 元数据来源
- 静态
metadata：站点名、固定图标和通用描述。 generateMetadata：商品标题、文章摘要、canonical、OG 图片等动态信息。- 文件约定：适合稳定的 icon、robots、sitemap 等资源。
2. 请求复用
页面和 generateMetadata 都需要读取详情时，要使用可复用的数据请求或框架 memoization，避免标题请求和页面请求重复打后端。失败时提供稳定 fallback，不能因为 SEO 请求失败导致整页不可用。
3. Streaming 边界
动态 metadata 可能在页面主体之后补充。对支持流式 metadata 的普通浏览器体验影响较小，但爬虫、社交抓取器和静态导出要用真实响应验证，不能只看客户端开发工具。
4. 安全和规范
用户输入要做长度、字符和 URL 协议校验；canonical、OG 图片和 alternate URL 不能直接拼接任意外部地址。租户自定义域名要经过绑定校验，避免生成错误或恶意链接。
5. 生产指标
观察 metadata 请求耗时、失败率、重复请求、页面 TTFB、爬虫抓取结果和社交卡片展示。重要页面做 HTML 快照回归。
可直接背诵的 30 秒回答
text
固定站点信息用静态 metadata，依赖路由和内容的数据用 generateMetadata。页面和 metadata 读取同一资源时要复用请求，避免数据瀑布；动态 metadata 要有 fallback、超时和缓存策略。最终还要分别验证浏览器 HTML、搜索爬虫、社交抓取和用户输入安全，不能只看页面标题是否出现。扩展知识
SEO 不是只改 title
还要关注 canonical、robots、结构化数据、OG 图片、语言 alternate、状态码、内容可抓取性和缓存更新。
面试官追问链
追问一：generateMetadata 中请求失败要不要让页面失败？
- 考察点：故障边界。
- 回答方向：普通内容页通常提供 fallback 并记录错误；关键合规或索引要求很高的页面可按业务决定阻断。
追问二：OG 图片应该在哪里生成？
- 考察点：资源和性能。
- 回答方向：可使用静态资源、边缘生成或独立图片服务，注意生成耗时、缓存、字体和用户输入安全。
追问三：metadata 能放用户隐私吗？
- 考察点：数据泄露。
- 回答方向：不能默认放。title、description 和 OG 内容可能被搜索、日志和第三方抓取，敏感信息要最小化。