160 lines
7.0 KiB
Markdown
160 lines
7.0 KiB
Markdown
---
|
||
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 一点问题没有，直到功能需求超出了静态的边界，才自然推动到前后端分离。
|
||
|
||
如果你也在纠结"要不要上后端"，不妨先问问自己：**你要做的是"展示内容"还是"提供服务"？**
|
||
|
||
前者，静态就够了；后者，来吧，后端欢迎你。😄
|
||
|
||
---
|
||
|
||
**🎉 目前注册功能已经可以用了，后续更多好玩的功能正在路上。部分功能可能需要登录才能体验，快注册一个账号吧！**
|