很多博主都有这样的困扰：一些文章不希望所有人都能直接看到，而是想设置一个“问题验证”，答对才能解锁。但如果你用的是纯静态博客，想实现这个功能却发现困难重重——文章内容在 HTML 里早就暴露了，CSS 或 JS 根本藏不住。
最近我在用 Astro 做博客时，尝试用 SSR（服务端渲染） 来解决这个问题。本文不讲具体代码，而是分享原理和思路，让你理解为什么 SSR 可以安全地保护文章内容，同时还能方便地控制访问权限。如果你对具体实现感兴趣，我会在文末提供链接去查看完整教程。
静态博客的加密局限
静态博客的内容在构建时就已经写进 HTML 文件里。即便你用 CSS 或 JavaScript 把文字“隐藏”起来，打开浏览器开发者工具就能轻松看到原文。
一些人会尝试在前端加密内容，然后在浏览器里解密显示。问题是——加密密钥也在前端，这意味着别人仍然可以破解。
所以，如果想做真正安全的加密，核心在于：验证和解密逻辑必须在服务器端完成，前端只负责展示和交互。
SSR：给静态博客加上“动态大脑”
服务端渲染（SSR, Server-Side Rendering）允许博客在用户访问时动态生成页面，而不是把文章内容提前打包到 HTML 里。这样做的好处：
- 文章内容不会提前暴露在前端
- 可以在服务器端验证访问条件
- 访问控制逻辑更清晰，可扩展性强
简单来说，用 SSR + 接口验证，就可以实现比较安全的文章加密。
实现思路概览
整个流程可以分为几个核心部分（以下为原理说明）：
-
从静态输出改为 SSR
- 静态博客在构建阶段生成所有页面，内容固定在 HTML 文件里。
- SSR 模式下，页面在访问时生成，文章内容不会提前暴露。
- 部署方式可选择 serverless（如 Vercel）或 standalone Node 服务，都可以满足加密需求。
-
在文章 metadata 中增加“问题/答案”字段
- 在每篇文章的 frontmatter 或配置里记录访问问题和答案。
- SSR 在渲染文章时会检查访问权限，未通过验证的用户无法看到内容。
-
前端交互
- 页面显示问题，用户输入答案后通过接口发送给服务器验证。
- 验证通过后，服务器返回文章内容，前端渲染显示；验证失败则提示错误。
- 这种方式可以使用任何前端框架（如 Vue、React）实现，核心逻辑在服务端。
-
模板调整
- 在文章模板里增加逻辑：检查文章是否加密、cookie 是否有效、是否显示加密组件等。
- SSR + 接口验证结合前端交互，实现安全的文章展示。
核心总结
- 静态博客加密的本质问题：内容已经在前端暴露。
- SSR 的优势：文章内容只在服务器存在，前端无法直接获取。
- 前端角色：只做交互展示，真正的验证逻辑由服务端完成。
对于想在博客里实现文章加密的朋友来说，这种 SSR + 接口验证 的方式，在安全性和实现复杂度之间，是一个比较理想的平衡点。
如果你对具体实现细节感兴趣，包括配置文件和组件示例，可以直接访问我的博客查看完整教程：点我查看