Shulou(Shulou.com)05/31 Report--

Today, I will talk to you about what is necessary for SAP Spartacus to manually open server-side rendering SSR. Many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something from this article.

Using server-side rendering, we can ensure that search engines, browsers with Javascript disabled, or browsers without JavaScript can still access our site content.

Add the following dependencies to 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

The technology that allows us to run Angular applications on the server is called Angular Universal. Exe in Angular documents.

Angular Universal generates static application pages on the server through a process called server-side rendering (SSR).

Root AppModule

Open the file src/app/app.module.ts and find the BrowserModule import in the NgModule metadata.

Replace the import with this:

BrowserModule.withServerTransition ({appId: 'your App-ID'})

As shown in the following figure:

Create an app.server.module.ts file in the src/app/ directory using the following AppServerModule code:

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 {}

Create a main.server.ts file in the src directory using the following code:

/ * * 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 provides a set of front-end and back-end isomorphic solutions in server-side rendering, which is Angular Universal (Unified platform), a technology for running Angular applications on the server side.

The standard Angular application executes in the browser, and it renders the page in DOM in response to the user's actions.

On the other hand, Angular Universal generates static application pages on the server side through a process called server-side rendering-SSR.

It can generate these pages and use them to respond directly to browser requests. It can also convert pages into HTML files and then use them as static files for use by the server.

working principle

To make a Universal application, you need to install the platform-server package. The platform-server package provides a server-side DOM implementation, XMLHttpRequest, and other underlying features, but is no longer dependent on browsers.

You will use the platform-server module instead of the platform-browser module to compile the client application and run the Universal application on a Web server.

The server (the Node Express server is used in the following example) passes the client's request for the application page to the renderModuleFactory function.

SEO

Web crawlers do not navigate to and index highly interactive Spartacus Angular applications like humans do.

Angular Universal can generate a static version of the application for you. It is easy to search, link, and browse without the help of JavaScript. It also allows the site to be previewed, because each URL returns a fully rendered page.

Add dev dependency to package.json:

"ts-loader": "^ 6.0.4", "@ nguniversal/builders": "^ 10.1.0", "@ types/express": "^ 4.17.0"

Used for translation of server-side applications.

These files need to be modified manually:

1. AppServerModuleimport {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' / / you can register the service provider @ NgModule that is unique to running applications in Universal environment ({imports: [AppBrowserModule, / / AppModule ServerModule of client application, / / Angular module ModuleMapLoaderModule of server side, / / lazy loading ServerTransferStateModule for server side routing) / / Import on the server Used to transfer state from server to client], bootstrap: [AppComponent],}) export class AppServerModule {}

Reference link: https://www.cnblogs.com/laixiangran/p/8664480.html

The server-side application module (traditionally called AppServerModule) is an Angular module that wraps the application's root module AppModule so that Universal can coordinate between your application and the server. AppServerModule will also tell Angular how to boot your application when running it as Universal.

Finally, the dist directory of build:

In client side render (CSR, client rendering) mode, the cx-storefront tag is empty in the HTML page returned for the first HTTP request:

In SSR mode, the first HTTP request contains the rendered HTML page on the server:

After reading the above, do you have any further understanding of what steps are necessary for SAP Spartacus to manually open server-side rendering SSR? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.