83 lines
3.9 KiB
Markdown
83 lines
3.9 KiB
Markdown
---
|
||
id: frontend.ssr.scenario.help-center
|
||
title: 帮助中心 + 智能客服：SEO、渲染模式组合和 BFF 设计
|
||
type: scenario
|
||
domain: frontend
|
||
stack: [ssr, react, nginx, fastapi]
|
||
tags: [SEO, SSG, ISR, BFF, 流式接口, 鉴权, CDN 缓存]
|
||
level: intermediate
|
||
prerequisites: [frontend.ssr.nextjs-app-router]
|
||
est_hours: 2.5
|
||
related: [frontend.ssr.interview, devops.nginx.scenario.ai-gateway-sse-canary]
|
||
week: [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 转发流式响应（示意）：
|
||
|
||
```ts
|
||
// 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](../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 取消上游。”
|