SPA Question - Can anyone explain how Target caching works?

[javierm24191144]

I'm facing the following issue with an SPA:

• Context:
  • At implementation level in Launch, I'm initializing Target on page load and firing a triggerView on History Change (in two different rules, both using Target v2 Extension events).
  • The SPA root is root/
  • The intended Page Delivery for my activity is root/item/1
• Issues:
  • When I set Page Delivery in Target activity to be root/item/1, it only gets activated on page load and not when navigating from the SPA root/.
    
    • In this last case, by debugging using the Mbox Trace the intended activity doesn't appear in the Evaluated Activities
    • My guess here is because the last page load was made in /root then the activities with Page Delivery set as root/item/1 won't even be evaluated here because of the Server-side decisioning.
  • By setting the Page Delivery url as the SPA root/ and refreshing the page in root/item/1 the expected modifications get applied, however when navigating from the SPA /root the expected modifications are not applied.
    • In this last case, by debugging using the Mbox Trace it says the activity was evaluated and passes all the qualifying criteria, however, it never gets to apply the modifications.
    • My guess here is because the last page load matched the Page Delivery of the intended activity (/root) then it cached the possible upcoming activities under the SPA /root path, but due to something else I'm unable to identify yet, it's unable apply the changes.
• My conclusions:
  • For me none of the above ways to setup the Page Delivery solves the expected activation that is when the page loads in the expected url /root/item/1 and when the user navigates there from the SPA /root 
• Questions:
  • How does caching works for SPAs to explain the current behavior?
    • Documentation says "Wherever triggerView() is implemented on your SPA, the Views and actions are retrieved from cache and shown to the user without a server call. triggerView() also makes a notifications request to the Target backend in order to increment and record impression counts".
  • What's the recommended way to setup Page Delivery for SPAs?
  • This SPA runs on React, is it possible that React is blocking Target to apply modifications due to the OOTB re-painting tasks run by this framework trying to preserve the state of the App?. How can I confirm/avoid that?
• Documentation I used for my setup:
  • https://developer.adobe.com/target/implement/client-side/atjs/how-to-deployatjs/target-atjs-single-p...
  • https://experienceleague.adobe.com/docs/platform-learn/implement-in-websites/implement-solutions/tar...
  • https://experienceleague.adobe.com/docs/target-learn/tutorials/experiences/use-the-visual-experience... 

[Gaurav_Singh · Accepted solution]

@javierm24191144  For SPA , there is a initial Target prefetch() call that captures all the views qualifying for that activity  and their corresponding experiences .

After this delivery request , when ever we fire any view notification call using triggerView() function , the content associated with that view renders on the page.

To further debug , could you try firing the triggerView call on URL change? You may use Data element to capture the viewName :

or

simply capture the URL change in the Data element , something like this :

and then fire triggerView call on this data element value change:

Hope this helps.