---
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 一点问题没有，直到功能需求超出了静态的边界，才自然推动到前后端分离。

如果你也在纠结"要不要上后端"，不妨先问问自己：**你要做的是"展示内容"还是"提供服务"？**

前者，静态就够了；后者，来吧，后端欢迎你。😄

---

**🎉 目前注册功能已经可以用了，后续更多好玩的功能正在路上。部分功能可能需要登录才能体验，快注册一个账号吧！**
