技术选型背后的思考：为什么选择Next.js + FastAPI + LangChain

技术选型背后的思考：为什么选择Next.js + FastAPI + LangChain

前言

技术选型是项目成败的关键。本文将深入分析我们在构建AI Agent框架时的技术选型思路，以及每个技术栈的优劣对比。

适合读者： 技术Leader、架构师、全栈开发者

---

一、技术选型的核心原则

1.1 选型标准

✅ 成熟度 - 生产环境验证
✅ 社区活跃度 - 问题能快速解决
✅ 性能 - 满足业务需求
✅ 学习曲线 - 团队能快速上手
✅ 生态完整性 - 周边工具丰富

1.2 避免的陷阱

❌ 盲目追新 - 选择不成熟的技术
❌ 过度设计 - 使用过于复杂的方案
❌ 技术债务 - 选择即将淘汰的技术
❌ 供应商锁定 - 过度依赖某一厂商

---

二、Frontend：为什么选择Next.js？

2.1 候选方案对比

框架	优势	劣势	评分
Next.js	SSR/SSG、优秀DX、生态完整	学习曲线稍陡	⭐⭐⭐⭐⭐
Create React App	简单易用	无SSR、配置受限	⭐⭐⭐
Vue.js + Nuxt	简单易学	生态不如React	⭐⭐⭐⭐
Angular	企业级完整方案	学习曲线陡峭	⭐⭐⭐
Svelte	性能优秀	生态较小	⭐⭐⭐

2.2 Next.js的核心优势

1. 服务端渲染（SSR）

// pages/chat/[id].tsx
export async function getServerSideProps(context) {
  const { id } = context.params;
  
  // 服务端获取数据
  const conversation = await fetchConversation(id);
  
  return {
    props: { conversation }
  };
}

// 优势：
// ✅ SEO友好
// ✅ 首屏加载快
// ✅ 更好的用户体验

2. 文件系统路由

pages/
├── index.tsx          → /
├── login.tsx          → /login
├── register.tsx       → /register
└── chat/
    ├── index.tsx      → /chat
    └── [id].tsx       → /chat/:id

// 优势：
// ✅ 无需配置路由
// ✅ 代码组织清晰
// ✅ 动态路由支持

3. API Routes

// pages/api/health.ts
export default function handler(req, res) {
  res.status(200).json({ status: 'ok' });
}

// 优势：
// ✅ 前后端一体化
// ✅ 无需单独部署API
// ✅ 适合BFF模式

4. 优秀的开发体验

# 热更新
npm run dev  # 修改代码即时生效

# TypeScript支持
# 自动类型推导、智能提示

# 优势：
# ✅ 开发效率高
# ✅ 类型安全
# ✅ 错误提示友好

2.3 实际应用示例

// app/chat/page.tsx
'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { sendMessageStream } from '@/services/chat'

export default function ChatPage() {
  const router = useRouter()
  const [messages, setMessages] = useState([])
  const [inputValue, setInputValue] = useState('')
  
  const handleSend = async () => {
    let assistantMessage = ''
    
    await sendMessageStream(
      conversationId,
      inputValue,
      (token) => {
        // 实时接收Token
        assistantMessage += token
        setMessages(prev => [...prev, {
          role: 'assistant',
          content: assistantMessage
        }])
      },
      () => {
        // 完成
        console.log('Done')
      }
    )
  }
  
  return (
    <div className="flex h-screen">
      {/* Chat UI */}
    </div>
  )
}

---

三、CSS框架：为什么选择TailwindCSS？

3.1 候选方案对比

方案	优势	劣势	评分
TailwindCSS	原子化、高效、可定制	HTML冗长	⭐⭐⭐⭐⭐
CSS Modules	作用域隔离	需要写CSS	⭐⭐⭐⭐
Styled Components	CSS-in-JS	性能开销	⭐⭐⭐
Bootstrap	组件丰富	样式雷同	⭐⭐⭐

3.2 TailwindCSS的优势

1. 原子化CSS

// 传统CSS
<div className="chat-message">
  <div className="avatar"></div>
  <div className="content"></div>
</div>

// TailwindCSS
<div className="flex space-x-3 p-4 bg-white rounded-lg shadow">
  <div className="w-8 h-8 bg-blue-500 rounded-full"></div>
  <div className="flex-1 text-sm text-gray-700"></div>
</div>

// 优势：
// ✅ 无需命名class
// ✅ 样式即文档
// ✅ 无CSS文件

2. 响应式设计

<div className="
  w-full          /* 移动端全宽 */
  md:w-1/2        /* 平板半宽 */
  lg:w-1/3        /* 桌面1/3宽 */
  p-4             /* 内边距 */
  md:p-6          /* 平板更大内边距 */
">
  响应式内容
</div>

3. 暗黑模式

<div className="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-gray-100
">
  自动适配暗黑模式
</div>

---

四、Backend：为什么选择FastAPI？

4.1 候选方案对比

框架	优势	劣势	评分
FastAPI	高性能、异步、自动文档	相对年轻	⭐⭐⭐⭐⭐
Django	功能完整、ORM强大	同步、笨重	⭐⭐⭐⭐
Flask	轻量灵活	需要自己组装	⭐⭐⭐
Express.js	生态丰富	需要TypeScript	⭐⭐⭐⭐

4.2 FastAPI的核心优势

1. 高性能异步

from fastapi import FastAPI
import httpx

app = FastAPI()

@app.get("/users/{user_id}")
async def get_user(user_id: int):
    # 异步HTTP请求
    async with httpx.AsyncClient() as client:
        response = await client.get(f"https://api.example.com/users/{user_id}")
        return response.json()

# 性能对比：
# FastAPI (异步): 10000+ QPS
# Flask (同步): 1000+ QPS
# Django (同步): 500+ QPS

2. 自动API文档

from pydantic import BaseModel

class User(BaseModel):
    id: int
    username: str
    email: str

@app.post("/users", response_model=User)
async def create_user(user: User):
    """创建用户"""
    return user

# 自动生成：
# - Swagger UI: http://localhost:8000/docs
# - ReDoc: http://localhost:8000/redoc
# - OpenAPI Schema: http://localhost:8000/openapi.json

3. 类型验证

from pydantic import BaseModel, EmailStr, validator

class UserCreate(BaseModel):
    username: str
    email: EmailStr
    password: str
    
    @validator('password')
    def password_strength(cls, v):
        if len(v) < 8:
            raise ValueError('密码至少8位')
        return v

@app.post("/register")
async def register(user: UserCreate):
    # 自动验证：
    # ✅ username必须是字符串
    # ✅ email必须是有效邮箱
    # ✅ password至少8位
    return {"msg": "注册成功"}

4. 依赖注入

from fastapi import Depends
from sqlalchemy.ext.asyncio import AsyncSession

async def get_db() -> AsyncSession:
    """数据库会话依赖"""
    async with async_session() as session:
        yield session

@app.get("/users")
async def get_users(db: AsyncSession = Depends(get_db)):
    # 自动注入数据库会话
    result = await db.execute(select(User))
    return result.scalars().all()

4.3 SSE流式支持

from fastapi.responses import StreamingResponse
import asyncio

@app.get("/stream")
async def stream():
    async def event_generator():
        for i in range(10):
            yield f"data: {i}\n\n"
            await asyncio.sleep(1)
    
    return StreamingResponse(
        event_generator(),
        media_type="text/event-stream"
    )

# 优势：
# ✅ 原生支持SSE
# ✅ 异步生成器
# ✅ 低延迟

---

五、Database：为什么选择PostgreSQL？

5.1 候选方案对比

数据库	优势	劣势	评分
PostgreSQL	功能强大、ACID、扩展性	配置稍复杂	⭐⭐⭐⭐⭐
MySQL	简单易用、生态好	功能相对弱	⭐⭐⭐⭐
MongoDB	灵活Schema	无事务支持	⭐⭐⭐
SQLite	零配置	不适合生产	⭐⭐

5.2 PostgreSQL的优势

1. 强大的数据类型

-- JSON类型
CREATE TABLE conversations (
    id SERIAL PRIMARY KEY,
    metadata JSONB  -- 支持JSON查询和索引
);

-- 数组类型
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    tags TEXT[]  -- 字符串数组
);

-- 全文搜索
CREATE INDEX idx_content ON messages 
USING gin(to_tsvector('chinese', content));

2. 事务支持

async with db.begin():
    # 创建对话
    conversation = Conversation(title="新对话")
    db.add(conversation)
    await db.flush()
    
    # 创建消息
    message = Message(
        conversation_id=conversation.id,
        content="你好"
    )
    db.add(message)
    
    # 自动提交或回滚

3. 扩展性

-- 安装向量扩展
CREATE EXTENSION vector;

-- 存储向量数据
CREATE TABLE embeddings (
    id SERIAL PRIMARY KEY,
    vector vector(1536)  -- 1536维向量
);

-- 向量相似度搜索
SELECT * FROM embeddings
ORDER BY vector <-> '[0.1, 0.2, ...]'
LIMIT 5;

---

六、AI框架：为什么选择LangChain？

6.1 候选方案对比

框架	优势	劣势	评分
LangChain	生态完整、RAG支持	抽象层多	⭐⭐⭐⭐⭐
LlamaIndex	专注RAG	功能单一	⭐⭐⭐⭐
Haystack	企业级	学习曲线陡	⭐⭐⭐
自研	完全可控	开发成本高	⭐⭐

6.2 LangChain的核心优势

1. 完整的RAG工具链

from langchain_community.vectorstores import Weaviate
from langchain_community.embeddings import OllamaEmbeddings
from langchain_community.llms import Ollama
from langchain.chains import RetrievalQA

# 1. Embedding模型
embeddings = OllamaEmbeddings(model="nomic-embed-text")

# 2. 向量数据库
vectorstore = Weaviate(
    client=client,
    embedding=embeddings
)

# 3. LLM
llm = Ollama(model="llama3.2:latest")

# 4. RAG链
qa_chain = RetrievalQA.from_chain_type(
    llm=llm,
    retriever=vectorstore.as_retriever(search_kwargs={"k": 5})
)

# 5. 问答
answer = qa_chain.run("如何重置密码？")

2. LCEL（LangChain Expression Language）

from langchain.prompts import PromptTemplate
from langchain.schema.output_parser import StrOutputParser

# 构建链
chain = (
    {"context": retriever, "question": lambda x: x}
    | prompt
    | llm
    | StrOutputParser()
)

# 流式执行
async for chunk in chain.astream("你好"):
    print(chunk, end="")

3. 丰富的集成

# 支持100+种集成
from langchain_community.llms import (
    Ollama,        # 本地模型
    OpenAI,        # OpenAI
    Anthropic,     # Claude
    HuggingFace,   # HuggingFace
)

from langchain_community.vectorstores import (
    Weaviate,      # Weaviate
    Chroma,        # Chroma
    Pinecone,      # Pinecone
    FAISS,         # FAISS
)

---

七、LLM：为什么选择Ollama？

7.1 候选方案对比

方案	优势	劣势	评分
Ollama	本地部署、零成本	需要GPU	⭐⭐⭐⭐⭐
OpenAI API	效果好、稳定	成本高、数据上传	⭐⭐⭐⭐
HuggingFace	模型丰富	需要自己部署	⭐⭐⭐
vLLM	高性能	配置复杂	⭐⭐⭐

7.2 Ollama的优势

1. 一键部署

# 安装Ollama
curl -fsSL https://ollama.ai/install.sh | sh

# 下载模型
ollama pull llama3.2:latest
ollama pull nomic-embed-text

# 启动服务
ollama serve  # http://localhost:11434

2. 简单的API

from langchain_community.llms import Ollama

llm = Ollama(
    model="llama3.2:latest",
    base_url="http://localhost:11434",
    temperature=0.7
)

# 同步调用
response = llm.invoke("你好")

# 异步流式
async for chunk in llm.astream("讲个笑话"):
    print(chunk, end="")

3. 本地化优势

✅ 数据隐私 - 数据不出本地
✅ 零成本 - 无API调用费用
✅ 低延迟 - 本地推理更快
✅ 可定制 - 可微调模型
✅ 离线可用 - 不依赖网络

---

八、向量数据库：为什么选择Weaviate？

8.1 候选方案对比

数据库	优势	劣势	评分
Weaviate	功能完整、性能好	资源占用高	⭐⭐⭐⭐⭐
Chroma	轻量、易用	功能较少	⭐⭐⭐⭐
Pinecone	云端托管	收费、数据上传	⭐⭐⭐
FAISS	高性能	无持久化	⭐⭐⭐

8.2 Weaviate的优势

1. 混合搜索

# 向量搜索 + 关键词搜索
results = vectorstore.similarity_search(
    query="重置密码",
    search_type="hybrid",  # 混合搜索
    k=5
)

2. 多租户支持

# 为每个用户创建独立的Collection
vectorstore = Weaviate(
    client=client,
    index_name=f"User_{user_id}_Docs"
)

3. GraphQL查询

{
  Get {
    ServiceTicket(
      nearText: {
        concepts: ["重置密码"]
      }
      limit: 5
    ) {
      title
      description
      _additional {
        distance
      }
    }
  }
}

---

九、技术栈总览

┌─────────────────────────────────────────┐
│           Frontend Stack                │
│  Next.js 13 + React 18 + TypeScript     │
│  TailwindCSS + Axios + SSE              │
└────────────┬────────────────────────────┘
             │
┌────────────▼────────────────────────────┐
│           Backend Stack                 │
│  FastAPI + SQLAlchemy 2.0 + Pydantic    │
│  PostgreSQL + Redis + JWT               │
└────────────┬────────────────────────────┘
             │
┌────────────▼────────────────────────────┐
│            AI Stack                     │
│  LangChain + Ollama + Weaviate          │
│  Pandas + llama3.2 + nomic-embed-text   │
└─────────────────────────────────────────┘

---

十、成本对比

10.1 本地部署 vs 云端API

项目	本地部署	云端API
初始成本	服务器：$2000	$0
月度成本	电费：$50	API费用：$500+
年度成本	$600	$6000+
3年总成本	$2600	$18000+

10.2 ROI分析

本地部署回本周期：4-5个月
3年节省成本：$15000+

---

十一、踩坑经验

11.1 Next.js部署

❌ 错误： 使用next export导出静态站点

• 问题：无法使用API Routes和SSR

✅ 正确： 使用next start或部署到Vercel

11.2 FastAPI异步

❌ 错误： 在异步函数中使用同步数据库操作

@app.get("/users")
async def get_users():
    users = db.query(User).all()  # ❌ 阻塞
    return users

✅ 正确： 使用异步ORM

@app.get("/users")
async def get_users(db: AsyncSession = Depends(get_db)):
    result = await db.execute(select(User))  # ✅ 异步
    return result.scalars().all()

11.3 Ollama显存

❌ 错误： 同时加载多个大模型

• 问题：显存不足

✅ 正确： 按需加载，及时释放

# 查看已加载模型
ollama ps

# 卸载模型
ollama stop llama3.2:latest

---

十二、总结

技术选型的核心思路：

✅ 成熟稳定 - 选择经过生产验证的技术

✅ 性能优先 - 满足业务性能需求

✅ 生态完整 - 周边工具和社区支持

✅ 成本可控 - 考虑长期TCO

✅ 团队匹配 - 符合团队技术栈

下一篇预告： 《SSE vs WebSocket：实时AI对话的最佳实践》

---

作者简介： 资深开发者，创业者。专注于视频通讯技术领域。国内首本Flutter著作《Flutter技术入门与实战》作者,另著有《Dart语言实战》及《WebRTC音视频开发》等书籍。多年从事视频会议、远程教育等技术研发，对于Android、iOS以及跨平台开发技术有比较深入的研究和应用，作为主要程序员开发了多个应用项目，涉及医疗、交通、银行等领域。

学习资料：

• 项目地址
• 作者GitHub

欢迎交流： 如有问题欢迎在评论区讨论 🚀