你有没有发现，最近几年网站技术发展得飞快，从传统的 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，做出最适合您的选择。
