zhuangang/topics/frontend/ssr/scenarios/help-center.md

id, title, type, domain, stack, tags, level, prerequisites, est_hours, related, week

id	title	type	domain	stack	tags	level	prerequisites	est_hours	related	week
frontend.ssr.scenario.help-center	帮助中心 + 智能客服：SEO、渲染模式组合和 BFF 设计	scenario	frontend	ssr react nginx fastapi	SEO SSG ISR BFF 流式接口 鉴权 CDN 缓存	intermediate	frontend.ssr.nextjs-app-router	2.5	frontend.ssr.interview devops.nginx.scenario.ai-gateway-sse-canary	7

帮助中心 + 智能客服：SEO、渲染模式组合和 BFF 设计

业务背景与问题

公司的帮助中心是一个 Vue 单页应用，搜索引擎几乎收录不到文章；新增的智能客服直接从浏览器调用 Python 的 AI 服务，出现：

1. 帮助文章在搜索引擎中找不到，客服电话量居高不下；
2. AI 服务的地址和临时令牌暴露在前端代码中；
3. 文章更新后要重新部署整个前端；
4. 用户在 CDN 上看到了别人的“我的工单”页面。

约束

• 文章由运营在 CMS 中维护，每天更新几十篇。
• AI 服务（FastAPI + LangGraph）由另一个团队维护。

方案设计

1. Next.js 重建帮助中心：
   • 文章页：静态生成 + 按时间或 CMS 回调（webhook）按路径重新验证，SEO 好、更新快；
   • 首页和分类页：静态生成；
   • “我的工单”：动态渲染，禁止 CDN 缓存（Cache-Control: private, no-store）；
   • 智能客服：客户端组件。
2. BFF：Next.js 的路由处理器作为 BFF，校验用户会话，转发到 AI 服务（服务间凭证只在服务端），透传流式响应；限流防刷。
3. SEO：每篇文章生成标题、描述、结构化数据；生成站点地图。
4. 部署：Next.js 以 Node 服务部署在 Nginx 后，静态资源走 CDN；Nginx 对 /api/chat 关闭缓冲。

关键代码

BFF 转发流式响应（示意）：

// app/api/chat/route.ts
export async function POST(request: Request) {
  const user = await getSessionUser(request);                    // 校验登录态
  if (!user) return Response.json({ error: "未登录" }, { status: 401 });
  if (!(await rateLimit(`chat:${user.id}`, 20, 60))) return Response.json({ error: "请求过于频繁" }, { status: 429 });
  const upstream = await fetch(`${process.env.AI_SERVICE_URL}/chat`, {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.AI_SERVICE_TOKEN}`, "X-User-Id": user.id },
    body: await request.text(),
    signal: request.signal,                                       // 用户断开时取消上游请求
  });
  return new Response(upstream.body, { status: upstream.status, headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache" } });
}

可运行的最小项目：examples/next-ai-chat。

取舍

选择	优点	缺点
Next.js SSG/ISR + BFF（本方案）	SEO、性能、安全兼顾	多了一个 Node 服务要运维
保持 SPA + 预渲染服务	改动小	预渲染服务维护麻烦，效果一般
Nuxt	团队熟悉 Vue	同样可行；选择取决于团队技术栈
浏览器直连 AI 服务	少一跳	凭证暴露、难以统一鉴权和限流

易错点

• 动态的个人页面被 CDN 缓存。
• BFF 把上游的流读完再返回，失去流式效果。
• 服务间令牌用 NEXT_PUBLIC_ 前缀的环境变量（会被打包进浏览器代码）。
• CMS 回调触发重新验证的接口没有鉴权。

面试怎么讲

“帮助中心我用 Next.js 重做：文章页静态生成，CMS 更新时通过回调按路径重新验证，SEO 和更新速度都解决了；我的工单是动态页面，明确禁止 CDN 缓存。智能客服前端是客户端组件，调用 Next.js 的路由处理器做 BFF：校验会话、限流，用服务端的凭证转发到 Python 的 AI 服务，直接透传流式响应，用户断开时通过 signal 取消上游。”