BFF 与 SSR 架构选型：Next.js/Nuxt 与微服务的边界实践
2026-06-12 14:22:53
# BFF 与 SSR 架构选型实践
> 案例：企业官网 + 管理后台，SEO 要求高，后端 Spring Cloud 微服务
## 一、三种模式对比
| 模式 | 优点 | 缺点 |
|------|------|------|
| 纯 SPA | 简单 | SEO 差、首屏慢 |
| SSR（Nuxt/Next） | SEO + 首屏 | Node 运维、复杂度高 |
| BFF 层 | 前端友好 API | 多一层维护 |
**推荐组合**：**Nuxt 3 SSR + 轻量 BFF（Nuxt Server Routes）** 聚合微服务。
---
## 二、架构图
```
Browser → CDN → Nuxt SSR Server
↓ Server API (/api/**)
Spring Cloud Gateway → 微服务群
```
- **公开页**：SSR 渲染，`useAsyncData` 服务端取数
- **管理后台**：可 CSR + 登录态
- **BFF**：仅 Nuxt `server/api`，不单独起 Node 服务
---
## 三、Nuxt 3 目录结构
```
pages/ # 路由与 SSR 页面
server/
api/
products.get.ts # BFF：聚合商品列表
user/
profile.get.ts
composables/ # useAuth, useApi
middleware/ # 鉴权
```
### 3.1 BFF 聚合示例
```typescript
// server/api/product-detail.get.ts
export default defineEventHandler(async (event) => {
const id = getQuery(event).id
const [product, reviews, stock] = await Promise.all([
$fetch(`${config.apiBase}/products/${id}`),
$fetch(`${config.apiBase}/reviews?productId=${id}`),
$fetch(`${config.apiBase}/inventory/${id}`),
])
return { product, reviews, stock }
})
```
前端只调 `/api/product-detail?id=1`，**减少浏览器 3 次 RTT**。
---
## 四、鉴权与 Session
| 方案 | 场景 |
|------|------|
| HttpOnly Cookie + JWT | 同域 SSR 推荐 |
| Bearer Token（Header） | 纯 API 移动端 |
SSR 请求微服务时，从 Cookie 解析 Token，**Server 端注入 Authorization**，避免 Token 暴露给浏览器 JS。
```typescript
// server/utils/auth.ts
export function getTokenFromEvent(event: H3Event) {
return parseCookies(event).access_token
}
```
---
## 五、缓存分层
| 层 | 策略 | TTL |
|----|------|-----|
| CDN | 静态资源 hash | 1y |
| Nuxt Route Rules | ISR 公开页 | 60s |
| Redis | 热点 API 缓存 | 5min |
| 微服务 | 本地 Caffeine | 30s |
```typescript
// nuxt.config.ts
routeRules: {
'/news/**': { isr: 120 },
'/admin/**': { ssr: false },
}
```
---
## 六、性能优化
1. **Payload 精简**：SSR 只传首屏字段，详情懒加载
2. **Streaming SSR**：Nuxt 3 实验性 stream HTML
3. **图片**：`` + CDN 裁切
4. **预连接**：``
目标：LCP < 2.5s，TTFB < 600ms（国内 CDN）。
---
## 七、何时需要独立 BFF 服务？
- 移动端 + Web + 小程序 **共用聚合逻辑** → 独立 Node/Java BFF
- 复杂 GraphQL 联邦 → Apollo Router
- 团队无 Node 能力 → **Spring Cloud Gateway 聚合**（注意别写成上帝 Gateway）
---
## 八、反模式
- ❌ BFF 写业务逻辑、直连 DB
- ❌ Gateway 为每个页面写聚合接口
- ❌ SSR 页面调 10+ 微服务（串行瀑布）
- ❌ 把密钥写在 `nuxt.config` 客户端 bundle
---
## 小结
BFF 解决 **前端体验**，SSR 解决 **SEO 与首屏**；Nuxt Server Routes 是国内全栈团队低成本组合。边界原则：**BFF 只聚合与裁剪，业务规则仍在微服务**。