SAP Commerce Cloud Accelerator UI 基于 JSP，属于服务器端渲染技术，Commerce 服务器将渲染好的 HTML 页面发送给客户端。

![](https://img-blog.csdnimg.cn/img_convert/0519349d6716f1038ab989725bf73b51.png)

![](https://img-blog.csdnimg.cn/img_convert/e5a0ac288e816df8572af1d3f537e2a4.png)

当用户在当前页面点击某些元素，要跳转到新的 UI 时，这些新的 UI 和当前页面是由不同的 page 实现的。因此这些跳转操作，会触发浏览器向服务器发起新的页面请求(page request).

![](https://img-blog.csdnimg.cn/img_convert/2b3cebc6c4aaaf424bb4bec9d9bdac7d.png)

客户端收到服务器发送的页面响应后，刷新自己的页面：

![](https://img-blog.csdnimg.cn/img_convert/f5a023f80f7fb70dbc9d4e1a0f78d511.png)

![](https://img-blog.csdnimg.cn/img_convert/bb47b9bf48e87e428332bb9df2702aba.png)

而 Spartacus UI 是单页面应用，客户端仅仅向服务器端请求一次页面模板代码( ng build 生成的 JavaScript 代码)：
![](https://img-blog.csdnimg.cn/img_convert/daeac7e056972059f54548d34c693e0b.png)

至于页面要显示的业务数据，通过 OCC API 调用向服务器端索取:
![](https://img-blog.csdnimg.cn/img_convert/f3523f9778c8e7cd4d561bfcd9d70d21.png)

最后，客户端也就是浏览器里，执行 Angular 框架代码，执行页面模板对应的 JavaScript 代码，将服务器端返回的 OCC API 响应进行渲染，得到最后客户看到的 Storefront 页面。

![](https://img-blog.csdnimg.cn/img_convert/1391e284e1e5e27ce8dec47c4ca46224.png)

当然，Spartacus UI 也支持服务器端渲染模式：Server Side Render mode，简称 SSR，此时页面源代码的渲染是在 SSR 服务器上完成。OCC API 的调用，也是 SSR server 向 Commerce 服务器发起的。

![](https://img-blog.csdnimg.cn/img_convert/f2243b479bab770268c3d59fad094a2d.png)

ITPub博客

SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异

最新文章