diff --git a/content/posts/sublog-evolution/img/cover.jpg b/content/posts/sublog-evolution/img/cover.jpg new file mode 100644 index 0000000..5b40d74 Binary files /dev/null and b/content/posts/sublog-evolution/img/cover.jpg differ diff --git a/content/posts/sublog-evolution/img/cover.svg b/content/posts/sublog-evolution/img/cover.svg new file mode 100644 index 0000000..67a52be --- /dev/null +++ b/content/posts/sublog-evolution/img/cover.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + 尼克的小窝 + + + 架构变迁 + + + + + 从纯静态到前后端分离 + + + + + Nuxt → React + Go + + + + 静态 + Monolith + + + 分离 + Front-end + Back-end + + + + diff --git a/content/posts/sublog-evolution/index.md b/content/posts/sublog-evolution/index.md new file mode 100644 index 0000000..a687a0f --- /dev/null +++ b/content/posts/sublog-evolution/index.md @@ -0,0 +1,159 @@ +--- +title: 尼克的小窝 架构变迁:从纯静态到前后端分离 +published: 2026-07-23T12:00:00 +updated: 2026-07-23 +description: 记录尼克的小窝从 Nuxt 3 纯静态博客演进到 React + Go 前后端分离架构的全过程,包括架构设计的思考、技术选型的变化,以及新增的账号注册功能。 +image: /posts/sublog-evolution/img/cover.jpg +tags: ['架构', 'React', 'Next.js', 'Go'] +draft: false +series: 尼克的小窝 开发记录 +seriesOrder: 1 +difficulty: 入门 +--- + +## 📝 写在前面 + +SuBlog 最初只是一个简单的技术博客——Nuxt 3 静态生成,Markdown 写文章,部署到静态托管完事。但随着功能需求的增长,纯静态的架构开始显露出局限性。 + +这篇文章记录从 **纯静态** 到 **前后端分离** 的演进过程,带你了解每一步背后的思考。 + +## 📦 第一代:纯静态(Nuxt 3 + @nuxt/content) + +### 🏗️ 架构图 + +```text +┌─────────────────────────────────────┐ +│ 静态托管 (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) + +### 🏗️ 架构图 + +```text +┌───────────────────────┐ ┌────────────────────┐ +│ 静态托管 (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. 🚪 登录后查看和管理个人信息 +``` + +## 🗓️ 后续计划 + +正在开发或规划中的功能: + +- [x] 用户注册/登录(已上线 🎉) +- [x] 个人资料编辑(已上线 🎉) +- [ ] 💬 站内评论系统 +- [ ] 🔖 文章收藏 +- [ ] 📚 阅读历史 +- [ ] 👍 文章点赞 +- [ ] 🔔 关注通知 +- [ ] 🎨 个人首页定制 + +## 💡 结语 + +从 Nuxt 3 纯静态到 React + Go 前后端分离,SuBlog 的架构变迁本质上是一个**功能驱动**的过程。静态博客有它的位置——写写文章、展示内容完全够用。但当你想做的不仅仅是"展示"时,后端的能力就不可或缺了。 + +这次重构最大的感触是:**架构选型不是越复杂越好,而是刚好够用最好**。纯静态阶段用 Nuxt 3 一点问题没有,直到功能需求超出了静态的边界,才自然推动到前后端分离。 + +如果你也在纠结"要不要上后端",不妨先问问自己:**你要做的是"展示内容"还是"提供服务"?** + +前者,静态就够了;后者,来吧,后端欢迎你。😄 + +--- + +**🎉 目前注册功能已经可以用了,后续更多好玩的功能正在路上。部分功能可能需要登录才能体验,快注册一个账号吧!**