技术选型与全景图

我是卡若。

选技术跟选合伙人一样，不求最贵的，但求最稳的。

我们要做的是一个高并发读取、低频次写入、极度依赖 SEO 的内容变现系统。

基于这个业务特征，我把整个技术栈扒得干干净净，列在这里。

1. 技术栈一览表 (Tech Stack)

领域	选型	理由	替代方案 (为何不用)
框架	Next.js 14 (App Router)	SSR 对 SEO 极度友好；React 生态最强；Vercel 亲儿子部署方便。	Vue/Nuxt (生态略逊), Pure React (无 SEO)
语言	TypeScript	类型安全，重构不慌。	JavaScript (维护是噩梦)
样式	Tailwind CSS	写得快，原子化，体积小。	CSS Modules (写得慢), Styled Components (运行时开销)
UI 库	Shadcn UI	复制粘贴即用，拥有代码所有权，方便魔改。	Ant Design (太重，风格太 B 端), MUI (太丑)
数据库	MongoDB	Schema-free，适合存文章、评论这种非结构化数据。	MySQL (表结构变更麻烦), PostgreSQL (太重)
部署	Vercel	零配置，全球 CDN，自动 HTTPS。	阿里云/腾讯云 ECS (还得自己运维 Nginx)
状态管理	Zustand	极简，比 Redux 少写 80% 代码。	Redux (太啰嗦), Recoil (已死)
包管理	pnpm	速度快，省磁盘空间。	npm (慢), yarn (幽灵依赖)

2. 架构全景流程图

这是一张让我们可以“闭眼开发”的地图。

%% 应用服务层
subgraph "应用服务 (Application)"
    NextServer -->|Page Request| SSR[服务端渲染 (SSR)]
    NextServer -->|API Request| API[API Routes]
    
    SSR -->|获取数据| DataLayer[数据访问层 (DAL)]
    API -->|业务逻辑| Service[业务服务 (Service)]
    
    Service -->|调用| DataLayer
end

%% 数据存储层
subgraph "数据存储 (Data Storage)"
    DataLayer -->|读取 Markdown| FileSys[文件系统 (book/)]
    DataLayer -->|读写动态数据| MongoDB[(MongoDB Atlas)]
    DataLayer -->|缓存热数据| Redis[(Redis - 规划中)]
end

%% 外部服务层
subgraph "外部集成 (External)"
    API -->|消息通知| Feishu[飞书 Webhook]
    API -->|支付回调| WechatPay[微信支付]
end

```

3. 核心决策点解析

3.1 为什么是 Next.js 而不是纯 React？

SEO 是命脉：我们的文章需要被百度、谷歌收录，纯 React 是客户端渲染 (CSR)，爬虫抓不到内容。Next.js 的服务端渲染 (SSR) 完美解决这个问题。
首屏速度：SSR 直接返回 HTML，用户不用等 JS 下载完就能看到字，体验极佳。

3.2 为什么用 Shadcn UI？

不是库，是代码：Shadcn 不是 npm 安装的包，而是把代码下载到你的 components/ui 目录。
魔改自由：我想把按钮改成圆的、扁的，直接改代码就行，不受第三方库的限制。这非常符合我们“独立自主”的创业精神。

3.3 为什么现在还是文件系统？

奥卡姆剃刀：如无必要，勿增实体。
现状：文章都在 Git 里，Git 就是最好的版本控制数据库。
未来：等文章超过 1000 篇，或者需要全文检索时，再把 Markdown 导入 MongoDB。

卡若说： 技术选型没有“最好”，只有“最合适”。这一套架构，扛个百万日活没问题，够我们折腾好几年了。

3.7 KiB Raw Blame History Unescape Escape

技术选型与全景图

1. 技术栈一览表 (Tech Stack)

2. 架构全景流程图

3. 核心决策点解析

3.1 为什么是 Next.js 而不是纯 React？

3.2 为什么用 Shadcn UI？

3.3 为什么现在还是文件系统？

3.7 KiB

Raw Blame History