_app is always static unless you use getInitialProps there, but if you use getInitialProps in _app you say goodbye to all static generation

@joulev ah okay. initially the app.js only had the route <Component> and inside each route there is a main <Layout> wrapper which originally contained the <Header> component. but it seemed like getStaticProps cached the Header as it was part of the Layout wrapper. I split it out to app.js to see if it would not cache it but still cached it.

so to my question, i assume there is no way to cache only part of the page with getStaticProps?

I know in the latest Next.js the caching has been overhauled to allow caching of certain aspects of the page if i remember correctly.

my issue is i am on a production site and we do not have the resources to upgrade to latest Next.js and to properly test it etc

so if i need to scrap the idea of caching on these pages due to getStaticProps always caching my header and user data, then so be it

Oh i see what you mean… yes, the pages router don’t support such granular caching mechanism - either you cache everything or you don’t cache anything. I used client side fetching to handle this issue: the entire page is statically generated but the dynamic component is fetched with react-query for example – this is bad for SEO but solves the caching problem

i see... yeah the issue we are having is we simply only want to cache the route data and not the header or footer or any other user data

@joulev do you have a link to a guide/tutorial for an example with react-query so i can do some further research?

Hmm just use react-query normally? Or swr if you want easier set-up. You make an api route that can be GET’d to get the data, then fetch it with swr. The component containing the swr call can be statically generated, and the fetch takes place in the browser after your page is loaded instead of in getServerSideProps for example

alright let me do some more looking into it. thanks for confirming

thanks for the information @joulev