服务端渲染(SSR)技术选型
适用场景:个人博客访客站(SEO、首屏、简单交互)
当前项目:Spring Boot 3.5 + Thymeleaf + MyBatis-Plus;管理后台为独立 SPA(/console)+ REST API(/api/admin)
1. 什么是服务端渲染
| 模式 |
谁在生成 HTML |
典型代表 |
| SSR |
服务器根据请求实时拼出完整 HTML |
Thymeleaf、JSP、PHP、Next.js SSR |
| CSR |
浏览器下载空壳 HTML + JS,再由前端请求数据渲染 |
Vue/React SPA |
| SSG |
构建时生成静态 HTML,部署后直接返回 |
Hugo、Hexo、Next.js SSG |
| ISR |
静态页 + 按策略在服务端增量更新 |
Next.js ISR、部分 CMS |
本博客访客站采用 SSR:爬虫与弱网环境可直接拿到正文;管理后台采用 CSR:交互复杂、无需 SEO。
2. 选型维度
| 维度 |
说明 |
博客访客站权重 |
| SEO |
标题、摘要、结构化数据是否进首屏 HTML |
高 |
| 首屏性能 |
TTFB、FCP;是否依赖大量 JS |
高 |
| 开发效率 |
与现有 Java 栈是否一致 |
高 |
| 运维成本 |
是否多语言、多进程、Node 运行时 |
中 |
| 交互复杂度 |
评论、搜索、实时编辑 |
低~中 |
| 安全 |
XSS、模板注入、敏感数据是否误下发 |
中 |
3. 方案对比(Java / Spring 生态为主)
3.1 服务端模板引擎(推荐用于本博客)
| 方案 |
特点 |
优点 |
缺点 |
适用 |
| Thymeleaf |
Spring 官方推荐,自然 HTML,Layout Dialect |
与 Boot 集成好、易学、天然防部分模板错误 |
复杂组件化不如前端框架 |
个人博客、企业门户 |
| FreeMarker |
语法偏脚本,性能好 |
成熟、灵活、性能好 |
模板可读性一般 |
邮件模板、报表、老项目 |
| JSP |
Servlet 时代标准 |
资料多 |
Boot 3 已弱化、不推荐新项目 |
遗留系统 |
| Mustache / Handlebars |
逻辑少、偏无逻辑模板 |
前后端可共用思路 |
Java 生态不如 Thymeleaf 顺手 |
多语言统一模板 |
3.2 前端框架 SSR(Node 运行时)
| 方案 |
特点 |
优点 |
缺点 |
适用 |
| Next.js (React) |
React 全栈 SSR/SSG |
生态强、组件化、ISR |
需 Node、与 Java API 分离部署 |
以 React 为主的全栈站 |
| Nuxt (Vue) |
Vue 全栈 SSR/SSG |
同上,Vue 技术栈 |
同上 |
Vue 团队、营销站 |
| Remix |
偏 Web 标准、嵌套路由 |
数据加载模型清晰 |
运维与 Java 后端两套 |
新产品、Node 团队 |
3.3 静态站点生成(SSG)
| 方案 |
特点 |
优点 |
缺点 |
适用 |
| Hugo / Hexo / Astro |
构建出纯静态 HTML |
极快、CDN 友好、无 Java 渲染压力 |
评论/搜索需第三方;动态能力弱 |
更新不频繁的技术博客 |
| Spring + 定时构建 SSG |
发布时生成静态页 |
兼顾 Java 数据层 |
流水线复杂 |
中大型内容站 |
3.4 混合架构
| 架构 |
说明 |
| 访客 SSR + 管理 CSR |
本博客现状:Thymeleaf 负责 /,Rsbuild SPA 负责 /console,API 统一 /api/admin |
| SSR + 部分岛屿(Islands) |
正文 SSR,评论区、点赞等小模块用少量 JS 增强 |
| SSR + CDN 缓存 |
Nginx 缓存公开页 HTML,管理接口不缓存 |
4. 与本项目相关的结论
4.1 访客站:Thymeleaf SSR ✅
选择理由:
- 技术栈统一:Controller → Service → MyBatis-Plus → Thymeleaf,无 Node 进程。
- SEO 友好:文章标题、摘要、导航在服务端写入 HTML。
- 部署简单:与现有 Docker + Nginx 反代一致,无需额外 SSR 服务。
- 已落地:
layout:decorate、分页列表、分类/标签/归档页均已模板化。
配套实践:
- 生产开启
spring.thymeleaf.cache=true(application-prod.yaml)。
- 静态资源走
/static/**,与 /console 下 SPA 资源路径隔离。
- 反向代理设置
X-Forwarded-Proto,保证 HTTPS 链接正确。
4.2 管理后台:CSR(SPA)✅
不采用 SSR 的原因:
- 无需被搜索引擎收录。
- 表单、表格、鉴权状态适合 SPA + REST。
- 与访客站解耦,发布后台不影响博客缓存策略。
部署注意:
- 构建时
assetPrefix: '/console/',避免静态资源请求到站点根路径 /static/(与博客冲突)。
4.3 未选用方案及原因
| 方案 |
不选原因 |
| Next.js / Nuxt SSR |
引入 Node 运行时与第二套部署,个人博客收益不足 |
| 全站 SPA + 预渲染 |
SEO 与首屏需额外 prerender 服务,不如模板 SSR 直接 |
| 纯 SSG(Hugo) |
已有 Java 后台与 MySQL,迁栈成本高 |
| JSP |
Spring Boot 3 非首选,社区新项目少见 |
5. 架构示意
┌─────────────────────────────────────┐
│ Nginx (443) │
└─────────────────────────────────────┘
│ │ │
/ │ /api/ │ /console/
▼ ▼ ▼
┌───────────────────┐ 同左 静态 dist
│ Spring Boot :8080 │◄───────── (Rsbuild)
│ │
│ Thymeleaf SSR │ REST /api/admin/**
│ / /post/*.html │
└─────────┬─────────┘
▼
MySQL
6. 性能与 SEO checklist
- [ ] 文章页
<title>、<meta name="description"> 由服务端注入
- [ ] 列表页分页链接使用真实 URL(
/category/xxx.html),非纯 #
- [ ] 生产开启 Thymeleaf 模板缓存
- [ ] 图片/ CSS 设置合理缓存头(Nginx
expires)
- [ ] 管理接口与公开页分离路径,避免误缓存 API
- [ ] 可选:站点地图
sitemap.xml、RSS(可后续 Controller 生成)
7. 何时需要重新评估
| 场景 |
可考虑调整 |
| 评论、点赞、实时通知变复杂 |
局部 CSR 组件或 WebSocket,正文仍 SSR |
| 多语言、千人并发阅读 |
CDN + 页面片段缓存 / 只读副本 |
| 团队主力为 React,愿维护 Node |
评估 Nuxt/Next 仅替换访客站,API 仍 Java |
| 更新极少、追求极致性能 |
发布流水线改为 SSG + 对象存储 |
8. 版本与依赖(当前仓库)
| 组件 |
版本/说明 |
| Spring Boot |
3.5.14 |
| Thymeleaf |
spring-boot-starter-thymeleaf |
| Layout Dialect |
thymeleaf-layout-dialect |
| Java |
17 |
| 管理端 |
独立 Rsbuild SPA,非 SSR |
9. 一句话总结
个人 Java 博客:访客站用 Thymeleaf 做服务端渲染,管理端用 SPA + REST;在 SEO、运维简单和栈统一之间平衡最好,无需为 SSR 单独引入 Node 全栈框架。