今天就跟大家聊聊有关SAP Spartacus手动开启服务器端渲染SSR所必须的步骤是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于网站建设、成都网站设计、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!
使用服务器端渲染,我们可以保证搜索引擎,与浏览器的Javascript禁用,或没有JavaScript的浏览器仍然可以访问我们的网站内容。
package.json里添加如下依赖:
"@angular/platform-server": "~10.1.0", "@nguniversal/express-engine": "^10.1.0", "@spartacus/setup": "^3.0.0-rc.2", "express": "^4.15.2"
@angular/platform-server
允许我们在服务器上运行Angular应用程序的技术, 在Angular文档中称为Angular Universal.
Angular Universal通过称为服务器端渲染(SSR)的过程在服务器上生成静态应用程序页面。
打开文件src/app/app.module.ts并在NgModule元数据中找到BrowserModule导入。
将该导入替换为此:
如下图所示:
使用以下AppServerModule代码在src/app/目录中创建一个app.server.module.ts文件:
import { NgModule } from '@angular/core';import { ServerModule, ServerTransferStateModule,} from '@angular/platform-server';import { StorefrontComponent } from '@spartacus/storefront';import { AppModule } from './app.module';@NgModule({ imports: [// The AppServerModule should import your AppModule followed// by the ServerModule from @angular/platform-server.AppModule,ServerModule,ServerTransferStateModule, ], // Since the bootstrapped component is not inherited from your // imported AppModule, it needs to be repeated here. bootstrap: [StorefrontComponent],})export class AppServerModule { }
使用以下代码在src目录中创建一个main.server.ts文件:
/*************************************************************************************************** * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. */import { enableProdMode } from '@angular/core';import '@angular/localize/init';import { environment } from './environments/environment';if (environment.production) { enableProdMode();}export { renderModule, renderModuleFactory } from '@angular/platform-server';export { AppServerModule } from './app/app.server.module';
Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术。
标准的 Angular 应用会执行在浏览器中,它会在 DOM 中渲染页面,以响应用户的操作。
而 Angular Universal 会在服务端通过一个被称为服务端渲染(server-side rendering - SSR)的过程生成静态的应用页面。
它可以生成这些页面,并在浏览器请求时直接用它们给出响应。 它也可以把页面预先生成为 HTML 文件,然后把它们作为静态文件供服务端使用。
要制作一个 Universal 应用,就要安装 platform-server 包。 platform-server 包提供了服务端的 DOM 实现、XMLHttpRequest 和其它底层特性,但不再依赖浏览器。
你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用,并且在一个 Web 服务器上运行这个 Universal 应用。
服务器(下面的示例中使用的是 Node Express 服务器)会把客户端对应用页面的请求传给 renderModuleFactory 函数。
网络爬虫不会像人类那样导航到具有高度交互性的 Spartacus Angular 应用,并为其建立索引。
Angular Universal 可以为你生成应用的静态版本,它易搜索、可链接,浏览时也不必借助 JavaScript。它也让站点可以被预览,因为每个 URL 返回的都是一个完全渲染好的页面。
package.json里添加dev dependency:
"ts-loader": "^6.0.4", "@nguniversal/builders": "^10.1.0", "@types/express": "^4.17.0",
用于对服务端应用进行转译。
这些文件均需要手动修改:
import { NgModule } from '@angular/core';import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';import { AppBrowserModule } from './app.module';import { AppComponent } from './app.component';// 可以注册那些在 Universal 环境下运行应用时特有的服务提供商@NgModule({ imports: [ AppBrowserModule, // 客户端应用的 AppModule ServerModule, // 服务端的 Angular 模块 ModuleMapLoaderModule, // 用于实现服务端的路由的惰性加载 ServerTransferStateModule, // 在服务端导入,用于实现将状态从服务器传输到客户端], bootstrap: [AppComponent],})export class AppServerModule { }
参考链接:https://www.cnblogs.com/laixiangran/p/8664480.html
服务端应用模块(习惯上叫作 AppServerModule)是一个 Angular 模块,它包装了应用的根模块 AppModule,以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 在把你的应用以 Universal 方式运行时,该如何引导它。
最后build的dist目录:
client side render(CSR,客户端渲染)模式下,第一个HTTP请求,返回的HTML页面里,cx-storefront标签是空的:
SSR模式下,第一个HTTP请求里,包含了服务器端渲染好的HTML页面:
看完上述内容,你们对SAP Spartacus手动开启服务器端渲染SSR所必须的步骤是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
网站栏目:SAPSpartacus手动开启服务器端渲染SSR所必须的步骤是什么
网址分享:https://www.cdcxhl.com/article12/ghhjgc.html
成都网站建设公司_创新互联,为您提供动态网站、定制网站、搜索引擎优化、网站设计公司、全网营销推广、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联