Is there any cache mechanism behind the ComponentPropsService, is it executed for every request in the editing/preview mode?

[achievecreative]

Description

We are using Sitecore 10.1 + JSS SDK 21.2 + nextjs 13.5 + nodejs 18.

I expected the getStaticProps method should be executed for every request in the editing/preview mode, at least it should be executed when nextjs is revalidate the page (our setting is 5s).

We have a component using the getStaticProps to fetch data from external service. I found out the data is not always up to date during the editing/preview (sometime it take a few minutes, sometime it will take around 20 minutes).

To debug this I add some logs in the getStaticProps method and found out I can't see the log message for every request.

https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html

Additional information

No response

[art-alexeyenko]

Hi @achievecreative !

Just want to ask some general questions to understand the issue better.
For your getStaticProps method, are you talking about page level or component level method?
What is the external service setup, is it possible there's some caching happening on requests to it?
Which hosting does this issue happen on (Vercel, local, XMCloud)?

[achievecreative]

Hi @art-alexeyenko,

It's on component level, we retrieve the product data from our own GraphQL service.
I added some console logs in getStaticProps method, expected to see the log every time when the method is executed. As I don't see the log, so I'm sure it's not request cache, it's because of the method is not executed.

Our environment:
Frontend is on Vercel and Sitecore is on Azure Web app.

[Antonytm]

@achievecreative

Let me give you some overview, of how EE/Preview edit mode works.

You should have something similar to this code in your [[...path]].tsx

const props = await sitecorePagePropsFactory.create(context);

sitecorePagePropsFactory executes different logic depending on the Sitecore mode.

• In the case of normal mode it requests to the Sitecore API endpoint to get layout data.
• In the case of edit/preview mode, it reads data from the disk cache (key-value cache in the case of Vercel)

First of all, please make sure that you use sitecorePagePropsFactory in your code. Otherwise, your Next.js would not know that you are in a different mode.

Then you can troubleshoot it.

1. Copy packages\sitecore-jss-nextjs\src\editing folder from official JSS repo to your project
2. Update your code render.ts import EditingRenderMiddleware. Use copied files instead of files from NPM package
3. Add logic inside the editing code to debug/troubleshoot it.

[art-alexeyenko]

Thanks for your input @Antonytm
@achievecreative sorry for taking a long time to get back on this issue. The short answer is we don't have a caching mechanism for component props, not out of the box, and props are calculated at runtime.
There could be a bug here, and I created a backlog item for us to investigate editing + SSG setup thoroughly.

[addy-pathania]

@achievecreative we did some investigation and found that the explained scenario works as expected for us. I would suggest to take a look at Antonytm's comment above and if you still face the problems then please submit an issue with appropriate reproduction steps. Thanks!