7.0 KiB
7.0 KiB
title, published, updated, description, image, tags, draft, series, seriesOrder, difficulty
| title | published | updated | description | image | tags | draft | series | seriesOrder | difficulty | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 尼克的小窝 架构变迁：从纯静态到前后端分离 | 2026-07-23T12:00:00 | 2026-07-23 | 记录尼克的小窝从 Nuxt 3 纯静态博客演进到 React + Go 前后端分离架构的全过程，包括架构设计的思考、技术选型的变化，以及新增的账号注册功能。 | /posts/sublog-evolution/img/cover.jpg |
|
false | 尼克的小窝 开发记录 | 1 | 入门 |
📝 写在前面
SuBlog 最初只是一个简单的技术博客——Nuxt 3 静态生成，Markdown 写文章，部署到静态托管完事。但随着功能需求的增长，纯静态的架构开始显露出局限性。
这篇文章记录从 纯静态 到 前后端分离 的演进过程，带你了解每一步背后的思考。
📦 第一代：纯静态（Nuxt 3 + @nuxt/content）
🏗️ 架构图
┌─────────────────────────────────────┐
│ 静态托管 (Nginx/Vercel) │
│ │
│ ┌───────────────────────────────┐ │
│ │ Nuxt 3 SSG 产物 │ │
│ │ │ │
│ │ pages/ + content/ + public/ │ │
│ └───────────────────────────────┘ │
│ │
│ Giscus (GitHub Discussions 评论) │
└─────────────────────────────────────┘
🔧 做了什么
- Nuxt 3 + TypeScript + Tailwind CSS v4 搭建前端
- @nuxt/content 管理 Markdown 文章，编译时生成静态页面
- Giscus 嵌入评论，依赖 GitHub Discussions
- 部署通过
nuxt generate输出.output/public，丢到 Nginx 或 Vercel
✅ 优点
- 部署极简，一个
nuxt generate搞定 - 加载飞快，全是 HTML，没有服务端开销
- 无需后端，零运维成本
❌ 局限
随着时间的推移，纯静态的问题越来越明显：
| 问题 | 具体表现 |
|---|---|
| 🐢 内容更新慢 | 改一篇文章要重新构建、重新部署，不能实时发布 |
| 👤 没有用户体系 | 无法区分读者和管理员，所有内容对所有人一致可见 |
| 🔒 评论受限 | Giscus 需要 GitHub 账号才能评论，门槛高 |
| 🚫 无法做动态功能 | 点赞、收藏、阅读统计、个性化推荐……统统做不了 |
| 🔗 前端锁死 | 被 Nuxt/Vue 生态绑定，想换技术栈得重写 |
⚡ 第二代：前后端分离（React + Go）
🏗️ 架构图
┌───────────────────────┐ ┌────────────────────┐
│ 静态托管 (Vercel) │ │ Go 服务端 │
│ │ │ │
│ ┌─────────────────┐ │ │ ┌──────────────┐ │
│ │ sublog-react │ │ API │ │ HTTP API │ │
│ │ (Next.js SSG) │──┼───────┼─>│ │ │
│ │ │ │ │ │ 文章 / 用户 │ │
│ │ 首页 / 文章 / │ │ │ └──────────────┘ │
│ │ 用户中心 │ │ │ │
│ └─────────────────┘ │ │ ┌──────────────┐ │
│ │ │ │ 数据库 │ │
└───────────────────────┘ │ └──────────────┘ │
└────────────────────┘
🖥️ 前端：sublog-react
选用 Next.js（App Router） + React 19，理由是：
- 🎨 React 生态——组件库成熟，开发效率高
- 📐 App Router——支持布局嵌套，页面组织清晰
- 📦 静态导出——仍可部署到静态托管
- ⚙️ 运行时配置——API 地址可动态注入，切换环境无需重新构建
前端不再直接读取 Markdown 文件，而是通过 HTTP API 获取文章数据。静态导出 + 客户端数据获取的组合，既保留了首屏加载速度，又实现了内容的动态更新。
⚙️ 后端：sublog-s
后端使用 Go + Gin，按业务逻辑分层组织代码。
核心技术选型：
| 技术 | 用途 |
|---|---|
| 🚀 Gin | HTTP 框架 |
| 🗄️ GORM | ORM，数据库操作 |
| 🔐 JWT | 用户认证 |
📊 前后对比
| 维度 | 第一代（纯静态） | 第二代（前后端分离） |
|---|---|---|
| 🎨 前端框架 | Nuxt 3 (Vue) | Next.js (React 19) |
| 🖥️ 后端 | 无 | Go + Gin |
| 📄 内容来源 | Markdown 文件 | API 数据库 |
| 🚀 发布方式 | 全量重新构建 | API 实时发布 |
| 👤 用户系统 | ❌ 无 | ✅ 注册/登录 |
| 💬 评论 | Giscus（需 GitHub） | 自有评论系统（规划中） |
| 📦 部署 | 1 个静态目录 | 前端静态 + 后端二进制 |
| ⚡ 更新体验 | 改文章 → 构建 → 部署 | 改文章 → 立即生效 |
🎉 新功能：注册账号
伴随着架构升级，用户账号系统也上线了。
📋 目前支持
现在你可以在尼克的小窝 注册一个账号：
1. ✏️ 填写用户名、邮箱、密码
2. 📧 查收激活邮件
3. 🔗 点击链接激活账号
4. 🚪 登录后查看和管理个人信息
🗓️ 后续计划
正在开发或规划中的功能：
- 用户注册/登录（已上线 🎉）
- 个人资料编辑（已上线 🎉）
- 💬 站内评论系统
- 🔖 文章收藏
- 📚 阅读历史
- 👍 文章点赞
- 🔔 关注通知
- 🎨 个人首页定制
💡 结语
从 Nuxt 3 纯静态到 React + Go 前后端分离，SuBlog 的架构变迁本质上是一个功能驱动的过程。静态博客有它的位置——写写文章、展示内容完全够用。但当你想做的不仅仅是"展示"时，后端的能力就不可或缺了。
这次重构最大的感触是：架构选型不是越复杂越好，而是刚好够用最好。纯静态阶段用 Nuxt 3 一点问题没有，直到功能需求超出了静态的边界，才自然推动到前后端分离。
如果你也在纠结"要不要上后端"，不妨先问问自己：你要做的是"展示内容"还是"提供服务"？
前者，静态就够了；后者，来吧，后端欢迎你。😄
🎉 目前注册功能已经可以用了，后续更多好玩的功能正在路上。部分功能可能需要登录才能体验，快注册一个账号吧！