SAP Spartacus SSR 中的 shimming 实现的一个例子

简介: SAP Spartacus SSR 中的 shimming 实现的一个例子

Angular 开发人员使用 HttpClient 与后台服务器交互。SAP Spartacus Storefront 支持服务器端渲染即 SSR,那么工作在 SSR 模式下的 Spartacus,又是通过什么方式调用的 OCC API 呢?


通用应用程序(Universal applications)使用 Angular 平台服务器包(platform-server)(与平台浏览器 platform-browser相对),它提供 DOM、XMLHttpRequest 和其他不依赖浏览器的底层特性的服务器端实现。


服务器(在 Angular 官网例子中使用的是 Node.js Express)将客户端对应用程序页面的请求传递给 NgUniversal ngExpressEngine。 在底层,该引擎调用 Universal 的 renderModule() 函数,同时提供缓存和其他有用的实用程序。


renderModule() 函数将模板 HTML 页面(通常是 index.html)、包含组件的 Angular 模块和确定要显示哪些组件的路由作为输入。路由来自客户端对服务器的请求。


下图是 SAP Spartacus AppServerModule,我们可以看到他导入了来自 @angular/platform-server 开发包的 ServerModule 和 ServerTransferStateModule 这两个 NgModule:


image.png


在 Spartacus 源代码里,虽然从 @angular/platform-server 导入了 renderModule 函数,但是没有在我们的代码里显式调用它。


image.png


renderModule() 函数将模板 HTML 页面(通常是 index.html)、包含 Component 的 Angular modules 和确定要显示哪些组件的路由作为输入。路由来自客户端对服务器的请求。


每个请求都会为请求的路由生成适当的视图。renderModule() 函数在模板的 <app> 标记内渲染视图,为客户端创建一个完整的 HTML 页面。


由于通用应用程序不在浏览器中执行,因此服务器上可能缺少某些浏览器 API 和功能。


例如,服务器端应用程序不能引用仅限浏览器的全局对象,例如窗口、文档、导航器或位置。


Angular 为这些对象提供了一些可注入的抽象,例如 Location 或 DOCUMENT; 它可能会充分替代这些 API。 如果 Angular 不提供它,则可以编写新的抽象,在浏览器中委派给浏览器 API,在服务器上委派给替代实现(也称为 shimming)。


下面是 SAP Spartacus 使用可注入抽象的一个例子:


从 @angular/common 包中导入 DOCUMENT:

image.png


通过构造函数进入注入:


image.png

在应用代码中使用:


image.png

相关文章
|
缓存 JavaScript API
SAP Spartacus SSR 中的 shimming 实现的一个例子
SAP Spartacus SSR 中的 shimming 实现的一个例子
|
资源调度
SAP 电商云 Spartacus UI 修改代码后,重新构建基于 SSR 版本的程序报错
SAP 电商云 Spartacus UI 修改代码后,重新构建基于 SSR 版本的程序报错
|
存储 缓存 API
2021-10-28 SAP Spartacus SSR 性能方面的一些学习笔记
2021-10-28 SAP Spartacus SSR 性能方面的一些学习笔记
152 0
2021-10-28 SAP Spartacus SSR 性能方面的一些学习笔记
SAP Spartacus UI ConfigurableRoutesService router.resetConfig 的调用逻辑
SAP Spartacus UI ConfigurableRoutesService router.resetConfig 的调用逻辑
SAP Spartacus UI ConfigurableRoutesService router.resetConfig 的调用逻辑
|
存储 缓存 JavaScript
手动为 SAP Spartacus 添加 SSR 支持的步骤
ng add @spartacus/schematics --ssr 在用 SAP Spartacus 开发的 store 里,能看到 devDependencies 里具有 @spartacus/schematics 的依赖:
手动为 SAP Spartacus 添加 SSR 支持的步骤
SAP Spartacus 服务器端渲染编程规范
SAP Spartacus 服务器端渲染编程规范
68 0
SAP Spartacus 服务器端渲染编程规范
|
资源调度 JavaScript Shell
SAP Spartacus SSR学习笔记 - 如何启用SAP Spartacus服务器端渲染模式
SAP Spartacus SSR学习笔记 - 如何启用SAP Spartacus服务器端渲染模式
122 0
SAP Spartacus SSR学习笔记 - 如何启用SAP Spartacus服务器端渲染模式
让 SAP Spartacus 某些 Component 不参与 SSR 的办法
让 SAP Spartacus 某些 Component 不参与 SSR 的办法
让 SAP Spartacus 某些 Component 不参与 SSR 的办法
|
存储
SAP Spartacus自定义指令cxOutlet的工作原理
SAP Spartacus自定义指令cxOutlet的工作原理
121 0
SAP Spartacus自定义指令cxOutlet的工作原理