玩不起SSR服务器渲染,试试SSG?

一、SSR很好,但也很贵

服务端渲染(Server-Side Rendering,SSR)是指在服务器端完成网页的渲染工作,将完整的HTML页面发送给客户端。当用户访问一个SSR站点时,服务器会根据请求的URL动态生成对应的HTML页面,然后返回给浏览器直接展示。

SSR的好处显而易见:首屏加载快、SEO友好、搜索引擎爬虫可以直接抓取到渲染好的页面内容。这也是为什么很多内容驱动型网站——博客、新闻站点、电商产品详情页——都会优先考虑SSR。

但SSR的代价同样不容忽视。

每次用户请求,服务器都要重新计算和渲染页面,这直接推高了CPU和内存消耗。遇到流量峰值时,渲染开销会线性放大。SSR通常需要更大、更强大的服务器来支撑,而且服务器需要持续运行Node进程。此外,SSR的实现复杂度高、开发和维护成本也不低。

说白了,SSR的“动态性”是用真金白银换来的。对于个人博客、小型文档站这类内容更新频率不高的站点,为每个访问者实时渲染页面,是一种不必要的负担。

二、SSG:把渲染搬到构建时

静态站点生成(Static Site Generation,SSG)的思路正好相反——在构建阶段就把网站内容预渲染成纯静态的HTML/CSS/JS文件

当用户请求页面时,服务器直接返回一个预先生成的HTML文件,不需要任何动态计算。这些静态文件可以部署到CDN上,全球用户都能获得极快的访问速度。

SSG和SSR的核心区别在于渲染发生的时机

  • SSR:每次请求时动态渲染
  • SSG:构建时一次性生成,请求时直接返回静态文件

因此,SSG天然适合内容不频繁变化的网站——博客、文档站点、企业官网、营销落地页。这类网站不需要实时数据,用SSG既能享受极致的加载速度,又能把服务器成本降到最低。

三、Hexo:一个纯粹的SSG实践者

如果说Next.js、Nuxt.js这类全栈框架是“什么都能做”的瑞士军刀,那Hexo就是一把专为博客打造的“手术刀”。

Hexo是一个基于Node.js的开源静态博客生成器。它的工作方式非常简单:你用Markdown写好文章,Hexo通过模板引擎把这些内容渲染成静态HTML文件。整个过程在本地或构建服务器上完成,生成的是纯粹的静态资源。

3.1 工作原理

Hexo的核心是生成器(Generator)机制。当你执行hexo generate命令时,Hexo会:

  1. 读取source/_posts目录下的Markdown文件
  2. 解析文章内容(标题、日期、标签、正文等)
  3. 套用主题模板进行渲染
  4. public目录下生成完整的HTML文件

整个过程只需要几秒钟,就能生成成百上千个静态页面。

3.2 部署:几乎零成本

Hexo最吸引人的地方在于部署的便捷性。你不需要购买云服务器,不需要配置Node运行环境——只需要把生成的静态文件托管到任何一个静态网站托管平台即可。

GitHub Pages是最常见的方案:执行hexo deploy,一条命令就能把整个站点推送到GitHub仓库,自动完成部署。而且是完全免费的。

此外,Vercel、Netlify、Cloudflare Pages等平台也都支持Hexo的一键部署。

3.3 性能优势

因为是纯静态文件,Hexo站点的访问速度是动态网站无法比拟的。不需要数据库查询、不需要PHP或Node运行时解析、不需要每次请求都渲染页面——服务器只需要做一件事:把HTML文件吐给浏览器。

配合CDN加速后,全球用户都能获得毫秒级的响应速度。而且静态网站几乎没有安全漏洞可攻,被攻击的可能性也大大降低。

四、什么时候选SSG,什么时候选SSR?

选型其实不复杂,记住一条原则:能用静态,不用动态

  • 博客、文档、个人网站、企业官网 → SSG(Hexo、Hugo、Jekyll等)
  • 需要实时数据、个性化内容的站点 → SSR(Next.js、Nuxt.js等)

SSG不是SSR的“平替”,而是另一种完全不同的思路。它放弃了一点“动态性”,换来了极致的速度、极低的成本和极少的运维烦恼。

(AI生成)