Discussion on sending redundant API requests for Spartacus UI transfer state of SAP e-commerce cloud

Angular Of TransferState Class makes server-side rendering (SSR) And pre rendering (Prerendered-SSR) Angular The application can use the data obtained from the server and render effectively in the browser .

If you are using SSR Or pre render application strategy , Then the process is roughly like this ：

• Pre render or render the application on the server
• The browser gets the rendered HTML and CSS And display “ static state ” Applications
• Browser access 、 analysis 、 Explain and execute JavaScript
• Angular Application is booted , With the new “ Running ” Replace the entire DOM Trees
• Application initialized , Usually from a remote server or API get data
• Users interact with Applications

There are two problems with this scenario ：

• DOM hydration The entire node tree will be replaced repeatedly and the application will be redrawn
• The application will repeatedly obtain the data that has been read theoretically , And because of SSR Or pre render the site policy and display it to the user

The first problem is that at present Angular Problems not solved in , however , There is already a solution to the second problem , This is what this article discusses Angular TransferState Mechanism .

Transfer State It's a strategy ：

• Use SSR Or pre rendering strategy to get a complete rendering “ static state ” Data required by the application
• Serialized data , And use the initial documentation (HTML) Send data in response
• At application initialization , Parse serialized data at run time , Avoid redundant data acquisition

Technically speaking , Data is passed through JSON.stringify() Serialize and pass JSON.parse() analysis . however , Usually we don't need to worry about this , Because this is by Angular Medium TransferState Service is performed for us .

Even if the server is SSR Working in mode , stay Chrome browser network in , It can still be observed CMS OCC API Call to .

It's on products and cms Of ssrTransfer：

ConfigModule.withConfig({
    
  state: {
    
    ssrTransfer: {
    
      keys: {
    
        products: true,
        cms: true
      }
    }
  }
});

• products： Indeed, it is not observed on the client OCC API Call to read product data .

• cms： By default , Every time route When something changes ,Spartacus Will reload CMS The page data , Whether it already exists in ngrx store in .

Customers can modify configuration items ：Spartacus config routing.loadStrategy: RouteLoadStrategy.ONCE To change this behavior .

The above logic is implemented in CmsPageGuard.shouldReload In the method .