Approach for PDP page along with SSR for caching purpose

[Ajaz_A]

Hi,

I have an use case for a retail ecommerce B2C domain client, where we have huge inventory of products with variations. Product have their dynamic data like price and stock availability and other dynamic data. I don't want to use CIF instead inclination is towards API based services exposed by API Gateway and other PIM services. Site is multi locale with high traffic from customers.

Question:

1. What is Adobe's recommendation for this use case from best practice point of view?
2. I dont want to create multiple Product detail page nodes in CRX instead a single page which acts like a template and pull rest of the dynamic and authored data (marketing data held in AEM) via API's to hydrate the page for each Product detail page request on first request and perform SSR. Subsequently, cache it at dispatcher/CDN like product-detail-prod-A.html, product-detail-prod-B.html, product-detail-<product name>.html. Rest of the dynamic data like price, inventory/stock availability etc will be pulled at client tier via ajax request(s). Need Adobe's recommendation on this approach and sample reference implementation, if any.

Thanks

[Saravanan_Dharmaraj · Accepted solution]

@Ajaz_A Couple of suggestions based on my experience.

1. You can create a template page like product page which has all the necessary components

2. Create the list of products who links points to the same product page but passes the product id or sku in the selector like this product.<product_id>

3. All the components should be able to read and use the selector ( product_id) and give the product details from the PIM. 

This page will be cached in dispatcher/cdn. Think about how to clear the cache too when you update the product details in PIM.

Second part: since you have multi lingual pages i would agree with your client side approach of making an API call to get the stock, price on click of say "Buy" button in the product page. That way the data can be dynamic.

Hope that helps!

[Harwinder-singh]

@Ajaz_A This is a typical e-commerce setup and you can consider the following to get this up and running (Of course this is based on my experience): 

• The first thing you will need a template that takes care of the overall layout of the page.
• Any layout variations can be introduced using experience fragments variations in the template.
• With a url format like - product-detail-<product name>.html , the product name can serve as the selector using which you execute your REST call to PIM to get product info related to the product-name. 
• Any price/quantity related information can be a server side component that lets you fetch this information dynamically. This component can be SDI based so that while the main page is still cacheable, this specific component in the page is not.

Hope this helps.