服务端渲染与 SEO 实践

服务端直出 HTML 与 SEO。

服务端渲染与 SEO 实践
分类:后端
标签: Thymeleaf SEO Spring Boot Java

服务端渲染(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 ✅

选择理由:

  1. 技术栈统一:Controller → Service → MyBatis-Plus → Thymeleaf,无 Node 进程。
  2. SEO 友好:文章标题、摘要、导航在服务端写入 HTML。
  3. 部署简单:与现有 Docker + Nginx 反代一致,无需额外 SSR 服务。
  4. 已落地:layout:decorate、分页列表、分类/标签/归档页均已模板化。

配套实践:

  • 生产开启 spring.thymeleaf.cache=trueapplication-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 全栈框架。