这是 Jerry 2021 年的第 52 篇文章，也是汪子熙公众号总共第 329 篇原创文章。

本文的主题也源自 Jerry 团队最近解决的一个客户 incident, 并且与 Jerry 之前的文章 SAP UI 渲染模式：客户端渲染 VS 服务器端渲染 介绍的内容密切相关。

让咱们简略回顾一下前文介绍的客户端渲染 (Client Side Render，简称 CSR) 和服务器端渲染 (Server Side Render，简称 SSR) 的区别。

客户端渲染

如下图所示，用户通过浏览器向网站发送申请，服务器或者 CDN 为用户提供动态 HTML、CSS 和 JavaScript 文件。浏览器下载 HTML 和 JavaScript 文件，并执行 JavaScript(通常是 Angular，React，Vue，SAP UI5 等前端框架的库文件)，实现页面渲染。绝大多数状况下，浏览器会通过 AJAX 向后盾服务器发出请求以获取动静内容。从服务器端失去 API 响应后，在客户端浏览器中解析响应内容，以出现最终页面。

客户端渲染，因为通过 HTML 页面源代码渲染最终页面，及依据 API 响应动静扭转页面内容的行为，均产生在客户端，因此得名。

采纳 CSR 技术的 SAP 产品 UI，包含所有应用 SAP UI5 框架开发的产品，比方 SAP Cloud for Customer，以及基于 SAP Fiori Elements 的 SAP S/4HANA 页面。

服务器端渲染

与 CSR 相比，在服务器端渲染机制中，从 HTML 源代码到最终出现给用户的页面的转换过程，均在服务器端运行环境中执行。

例如，假如一个 Angular 利用开启了服务器端渲染模式，应用 express 库运行在一个 Node.js 服务器上，则该利用的 index.html 页面，通过 nguniversal/express-engine 引擎，进行渲染的入口地位如下：

服务器端渲染完结后，将最终出现给客户的 HTML 源代码字符串，通过回调函数发送给浏览器，即下图第 1006 行的回调函数 done.

下图第 1008 行 done 回调函数中展现的变量 str，存储的是 SAP Commerce Cloud UI 开启服务器端渲染后，由服务器渲染结束的 index.html 的残缺 HTML 源代码，超过 240KB；而在客户端渲染模式下，服务器返回给浏览器的 index.html 内容, 大小还不到 1KB.

采纳 SSR 技术的 SAP 产品 UI，包含所有基于 SAP ABAP Webdynpro，WebClient UI 技术的产品，比方 SAP SRM，SAP CRM，SAP S/4HANA 里的 Service 模块的 UI，SAP Commerce Cloud 基于 JSP 技术的 Accelerator UI 等等。

基于 SAP Spartacus 开源我的项目的新一代 SAP Commerce Cloud UI，同时反对客户端渲染和服务器端渲染两种形式。

回归本文正题。

客户端渲染模式下，Web 利用对搜索引擎优化的反对较弱。以 SAP Commerce Cloud UI 为例，当应用客户端渲染时，搜索引擎的网络爬虫，抓取的 index.html 页面空洞无物：app-root 标签内，没有任何内容，因为该内容直至浏览器收到 index.html 之后，才会执行 Angular 框架代码，生成最终的 HTML 源代码。

而开启服务器端渲染模式后，服务器端实现页面渲染，此时服务器返回浏览器的 app-root 标签内，曾经蕴含了渲染结束的最终页面。大家能够将下图服务器端渲染模式开启后，申请 SAP Commerce Cloud UI 首页时，从服务器端收到的 index.html 里 app-root 标签内的数据，同上图客户端渲染模式下的数据进行比照。

服务器端渲染解决了网络爬虫无奈正确抓取 Web 利用页面内容的问题, 然而把页面渲染，数据申请和响应解决移至服务器端，势必会占用服务器端贵重的内存资源和减少其解决累赘。

为此，在 SAP Commerce Cloud UI 服务器端渲染模式下，咱们团队也设计了一些优化逻辑，比方引入渲染缓存，减少渲染队列和超时机制，以及在肯定条件降落级到客户端渲染等措施，以此在保障服务器失常的服务能力和反对搜索引擎优化之间，取得较好的折衷。

https://sap.github.io/spartac…

反对服务器端渲染，只是实现搜索引擎优化的第一步。基于 SAP UI5 框架开发的 SAP 利用，绝大多数都不是 2C 利用，因而不依赖于搜索引擎优化，亦即这些利用不大可能会呈现在用户的搜索引擎后果列表中。

另一方面，比方客户应用 SAP Commerce Cloud 搭建本人的电商店铺，则店铺对于搜索引擎优化的欠缺水平，和店铺的销售额有间接的关系。

网站的搜索引擎优化是一门学识，本文 Jerry 只介绍最近解决客户 incident 理解到的相干常识。

咱们在 Google 里依据关键字 lego ae 进行搜寻，搜寻后果的第二条记录，赫然就是乐高在阿联酋地区 (国家代码为 AE) 的电商店铺网站，这是一个基于 SAP Spartacus 开发的 SAP Commerce Cloud UI 页面：

上图灰色区域的页面题目，和黄色区域的页面形容信息，别离来自 SAP Commerce Cloud UI 网页源代码中的 title 标签和 meta description 标签的值。

再比方依据关键字 lego ae LEGO Dinosaur Fossils，搜寻乐高一款恐龙化石的产品：

搜寻进去的后果列表里，呈现了一种 SAP Commerce Cloud UI PDP 页面 – Product Detail Page，即产品明细页面：

以上例子中无论是页面 title 标签，还是 meta description 标签的值，均为后盾驱动，即来自 SAP Commerce Cloud 后盾零碎。

咱们团队在 SAP Commerce Cloud UI 实现中，设计了 Page 模型，其 title 字段和 description 字段，别离保护须要渲染在 HTML 源代码 title 和 meta description 标签页的值。

咱们称上图的模型为 SAP Commerce Cloud UI 页面的元数据：Page Meta.

在运行时，这些页面元数据通过 PageMetaService 类的 meta$ 成员保护，其赋值逻辑如下：

(1) 调用 CMSService 的 getCurrentPage 办法，从 Commerce 后盾读取页面元数据；

(2) 依据 Commerce Cloud 前端配置，读取以后类型的页面须要实现的元数据解析类型，失去负责执行对应操作的解析器(Resolvers)；

(3) 调用对应的解析器，实现解析工作。

解析结束的页面元数据，存储在 PageMetaService 的成员变量 meta$ 内，后者最终被 SeoMetaService 所订阅，将其值取出，注入到页面 DOM 元素中。这就是 SAP Commerce Cloud UI 针对搜索引擎优化中基于 meta 标签的实现过程。

而在 SAP S/4HANA 这种 Backoffice 人员应用居多的利用里，页面里尽管也存在 meta 标签，但和 SAP Commerce Cloud UI 应用 meta description 标签反对搜索引擎优化不同，S/4HANA UI 页面里的 meta 标签，更多体现的是其保护页面元数据的本来用处，这些元数据被 SAP UI5 框架代码和对应的后盾代码解析，对客户来说是齐全通明的。

比方下图名称为 sap-client 的 meta 标签，保护的 content 内容为 715，意思是该 Fiori Launchpad 后盾对应的 ABAP Client ID 为 715.

最初，大家在搜索引擎里应用 inurl 语法进行搜寻，就能找到一些利用 SAP WebClient UI 技术，进行服务器端渲染，可能被搜索引擎检索到的网站。感兴趣的敌人能够自行尝试。

心愿本文可能让大家对于 SAP 产品 UI 反对搜索引擎优化上做出的致力有一些根本理解，感激浏览。

更多浏览

• 从产品展现页面谈谈 Hybris 的特有概念和设计构造
• 从产品展现页面谈谈 Hybris 系列之二: DTO, Converter 和 Populator
• Hybris Enterprise Commerce Platform 服务层的设计与实现
• 从一个理论的例子登程，谈谈 SAP Commerce Cloud 电商云的 UI 自定义开发
• SAP Commerce Cloud (电商云) UI 的懒加载性能
• SAP CRM Fiori 利用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来扭转 UI 显示格调
• SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud (电商云) UI 加强实现中的体现
• Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版
• 一小时外在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境
• SAP Commerce Cloud (电商云) 路由门路的自定义配置与开发
• 响应式编程在 SAP 规范产品 UI 开发中的一个实际
• SAP UI 的加载动画成果和幽灵设计(Ghost Design)
• SAP UI 渲染模式：客户端渲染 VS 服务器端渲染

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: