你有没有发现,最近几年网站技术发展得飞快,从传统的 HTML/CSS 升级到像 Angular、React、Vue 这样的前端大型框架,复杂度也越来越高。面对这些新技术,企业主们经常问我们一个关键问题:“能不能把网站做成前后端分离?”这听起来很高深,但实际上并没有那么复杂。今天我们就来聊聊 CSR(Client-Side Rendering)和 SSR(Server-Side Rendering),它们如何影响 SEO,它们的优缺点是什么,以及一些常见的误解。
什么是前端与后端?
首先,我们得搞清楚前端和后端是什么。很多人会把前端和前台,后端和后台搞混。简单来说,前台是用户看到的界面,后台是管理员操作的界面。而前端是指浏览器上看到的网站程序和画面,包含 HTML/CSS/JS 等,是主要与用户互动的 UI 界面。后端则是服务器上运作的程序语言和数据库,可能是 PHP、Ruby、Python、MySQL、PostgreSQL 等。
网站的输出模式
CSR 和 SSR 指的就是前端与后端的交互模式。SSR 是服务器端渲染,CSR 是客户端渲染。
什么是 SSR?
SSR 即 Server-Side Rendering,服务器输出画面。传统的网站大多数是由服务器将 HTML 组合起来,发送到浏览器端。每次点击页面时,服务器会重新输出完整的 HTML 页面,所以页面会有跳转的感觉。
SSR 的特性与优缺点
开发协作简单,工程师训练较困难
SSR 的特性是由服务器输出每页的 HTML,所以后端程序同时要处理数据库存取、网站商业逻辑与前端 HTML/CSS/JS 等等的交互工作,然后再一口气推送到浏览器端。实务上前后端很难分开开发,必须要同时开发,因此一位工程师需要同时了解前端与后端的基本知识,训练较为困难。
体验不佳,但 SEO 优良
在体验上,因为特性是跳转页面时会比较有切换的感觉,操作时会有一种中断感,这是体验上的缺点。但其优点是 SEO 成效非常好。每页都会把完整的 HTML 包含网站内文输出给用户,搜索引擎在爬取时,可以直接得知每一页有什么文字内容,进而增进索引效率。
首次进入网站快
SSR 首次进入网站的速度比较快,因为 SSR 只会把该页面需要的内容传输给浏览器。而 CSR 是由浏览器绘制页面,这意味者大多数的程序逻辑都放在 HTML/JS 这一边,首次进入页面时,要加载比较大包的程序文件,才能开始绘制网站。故相较之下,SSR 首次进入网站的速度反而较快,这同样也是增进 SEO 的一个要点。
更适合企业官网或内容网站
由于以上因素,我们可以看到大多数的新闻信息或杂志博客网站,几乎都是 SSR。企业形象官网,也大多数会选择 SSR 来增进 SEO。如果您是要做企业网站,或是分秒必争的营销网页,SSR 可能是较好的选择。
什么是 CSR?
CSR 即 Client-Side Rendering,客户端输出画面,这里的客户端是指浏览器的意思。也就是说进入网站时,只会收到一次 HTML,之后点击所有页面,不会产生跳转,都是由浏览器将这些数据绘制成新的页面。由于只有一份 HTML 且没有跳转的感受,这种网站又称为 SPA(Single Page Application)单页应用程序。
CSR 的特性与优缺点
开发协作较麻烦,工程师训练较容易
CSR 的网站开发模式较为麻烦,成本也稍高。工程师必须先制作后端程序,编写成 API,然后再编写前端的程序,接着前端程序要通过 API 向服务器调用资料,取得 JSON 格式的数据内容,再绘制成前端网站画面。一般来说,相同功能下,成本会是 SSR 的 1.5 倍 - 2 倍。
操作较流畅
在用户体验方面,CSR 的优点是,跳转页面的感受比较流畅,你会觉得像是在操作一个软件,而不是网页。因此 CSR 在国外大多数用于后台界面、操作界面、应用软件或 SaaS 软件服务等等,由于需要用户大量的操作,流畅的接口比较不会让人感到不耐烦。
首次加载慢、SEO 不佳
CSR 的缺点是首次加载网站较慢,你会看到一个明显的读取进度或读取画面 LOGO,跑完之后网站才会显现出来,这在分秒必争的 SEO 上是一个明显的缺点。每页的 HTML 不含内文等重要信息,都要后续等待加载,所以搜索引擎无法得知内文,难以索引。
CSR 搭配 SSR
既然 CSR 在 SEO 上有难以改善的缺点,那有没有办法补齐这个部分呢?近年来,CSR 的相关主流框架,开始支持 SSR 绘制页面。也就是说,一开始进入网站时,先由服务器输出 SSR 的 HTML 页面,让搜索引擎较容易索引,用户也能更快看到网站。接着 JS 框架引擎会把这个输出的 HTML 应用到动态程序上面,让它变成可以动态切换的页面,这个行为称为水合(Hydration)。
一次解决所有问题,但成本最高
这算是大型企业或大型网站在用户体验与 SEO 上的终极解决方案,一次可以解决上面提到的双重问题。但最大的缺点就是,成本非常高,因为所有页面都要特别提供一个 SSR 的输出版本。后端除了 API 以外,也必须实施 Server 进程,作为动态吐出 HTML 的 SSR 端点。
常见的误解
SSR 的工程师一定要是全端
很多人以为 SSR 就必须是全能型的工程师才能做。但其实 SSR 也是可以简易区分前后端的,例如后端工程师写数据库存取的部分,前端工程师进行套版。中间采用模板语法做桥接,这样就不用特别去学两种不同的技术。
做 CSR 就可以同时提供 API 给别人用
由于 CSR 必须先在后端开发 API,很多企业以为这样就能顺便提供 API 给第三方团队进行应用。实务上虽然做得到,我们强烈不建议这种作法,因为资安非常差。内部使用的 API 通常不会有严格的权限控管,但提供给外部用的 API,最好要有 API Key,必要时可以撤除 API Key 与 AccessToken。
CSR 是未来的趋势,SSR 将被淘汰
实际上并不会这样,因为前面提到了搜索引擎的基本运作原理,无论如何 SSR 依然有它的优势存在。未来可能会有更多 CSR 的应用软件,但是内容、新闻、杂志型网站,或者企业官网,大多还是用 SSR 在商业上会有更好的成效。
搜索引擎未来可以完美的索引 CSR
这个期望已经等了十年了。许多推广 CSR 的文章最后都会说:“搜索引擎正在强化对 AJAX 的索引能力,未来一定能取代 SSR”,很可惜,这个未来还没到来。虽然搜索引擎确实也越来越能良好的索引 CSR 网站,但实践上目前的成效依然没有 SSR 来得好。
结论
无论是 CSR 还是 SSR,各有优缺点,关键在于您的实际需求和预算。企业应该根据自身的情况,选择最合适的技术方案。如果您需要更好的 SEO 成效和较快的首次进入速度,SSR 是不错的选择。而如果您更注重用户体验和操作流畅度,CSR 则可能更适合。希望这篇文章能帮助您更好地理解 CSR 和 SSR,做出最适合您的选择。