Help - SSR page is cached forever! | Next.js | Page 1

random narwhal Feb 18, 2022, 4:47 PM

#

Hi, I am having a caching issue with my SSR page. No matter how many times I refresh the app, or how long I wait before refreshing, the same content is being returned. I have verified that the content in the back-end has changed (by querying the GraphQL API via Apollo Studio). The problem is that the Next.js server is simply not calling that API and returning the cached copy of the page (this is in development mode).

I checked the Cache-Control header in the response and it says "no-store, must-revalidate" - as it should, so caching should be disabled. I also explicitly disabled my chrome cache in dev tools. Still no luck 😦

Any clue what's going on?

Here's my repo if you want to take a peek. The specific page in question is here: https://github.com/nareshbhatia/proshop-nx/blob/main/apps/cart/pages/index.tsx#L27-L59

GitHub

proshop-nx/index.tsx at main · nareshbhatia/proshop-nx

Sample shopping app using the Nx monorepo. Contribute to nareshbhatia/proshop-nx development by creating an account on GitHub.

gilded shell Feb 18, 2022, 4:48 PM

#

random narwhal Hi, I am having a caching issue with my SSR page. No matter how many times I ref...

weird because by default it is set to <some time amount that i don't remember>, stale-while-revalidate

potent depot Feb 18, 2022, 4:52 PM

#

And what happens when you build to production?

random narwhal Feb 18, 2022, 4:58 PM

#

Same behavior in production, only change is value of Cache-Control now is private, no-cache, no-store, max-age=0, must-revalidate - which should still not cache.

potent depot Feb 18, 2022, 4:59 PM

#

Yeah that's the same headers for me, I'm using getIntialProps . It is s-maxage=5, stale-while-revalidate for a getStaticProps page tho like @gilded shell said

random narwhal Feb 18, 2022, 5:02 PM

#

Yeah, that seems reasonable for a SSG page. My page is SSR and its Cache-Control values also look reasonable. Still can't figure out where this is being cached!

potent depot Feb 18, 2022, 5:03 PM

#

Did you try in another browser?

random narwhal Feb 18, 2022, 5:05 PM

#

Same behavior on Safari 😦

potent depot Feb 18, 2022, 5:06 PM

#

Btw you have a different app just for your cart?

#

Btw you have a hardcoded backend url. Is your backend url at localhost:3333 Or maybe with Apollo Studio you're hitting another url?

random narwhal Feb 18, 2022, 5:09 PM

#

Yes. The idea is to eventually use some micro-frontend stack to present them as a single app.

#

Yes, hard coding the URL for now. The back-end is indeed running on port 3333. I could not make the proxy config to work with apollo client.

potent depot Feb 18, 2022, 5:11 PM

#

It's okay like that, I'm doing the same for local dev

#

for Apollo Client

random narwhal Feb 18, 2022, 5:13 PM

#

Yes, so to give you more context, I can add stuff to the cart using the catalog app, but the new cart status does not show up in the cart app - no matter how many times I refresh!!!

gilded shell Feb 18, 2022, 5:16 PM

#

random narwhal Same behavior in production, only change is value of Cache-Control now is `priva...

actually checked and for ssr it is must-revalidate

potent depot Feb 18, 2022, 5:17 PM

#

random narwhal Yes, so to give you more context, I can add stuff to the cart using the catalog ...

Don't you have your data hardcoded in a json?

#

At least that's what I saw in your Apollo Server setup

random narwhal Feb 18, 2022, 5:18 PM

#

Only the product and category list is hard coded. The cart is dynamic.

potent depot Feb 18, 2022, 5:21 PM

#

How does this work. I don't see any database set up. Where is this cart stored?

random narwhal Feb 18, 2022, 5:26 PM

#

In memory. This is just a mock server. https://github.com/nareshbhatia/proshop-nx/blob/main/apps/proshop-api/src/app/datasources/CartService.ts#L7

potent depot Feb 18, 2022, 5:27 PM

#

Yes, I saw that. I was wondering if there's any issue there.

#

But if you say it works through postman or smth

random narwhal Feb 18, 2022, 5:28 PM

#

Yeah, works through Apollo Studio, so no issue there.

#

Only thing is that cart is lost when server is rebooted - but that's ok for a sample app.

potent depot Feb 18, 2022, 5:29 PM

#

Well something is not right when it doesn't work from different browsers

random narwhal Feb 18, 2022, 5:29 PM

#

The idea is that it should be super quick to install and try the app - under 10 minutes!!!

potent depot Feb 18, 2022, 5:30 PM

#

Incognito mode?

random narwhal Feb 18, 2022, 5:30 PM

#

Let me give that a shot

#

No luck 😦 same stale result.

potent depot Feb 18, 2022, 5:36 PM

#

Stale as in the cart is empty?

random narwhal Feb 18, 2022, 5:36 PM

#

No cart has stale contents

#

So I can go add things to the cart from the catalog app, but the cart app is stuck at whatever it had before.

potent depot Feb 18, 2022, 5:37 PM

#

@gilded shell s-maxage=5, stale-while-revalidate the 5 is my revalidate setting to 5 seconds (for testing), so that would be this.

#

@random narwhal I'm out of ideas 🙂

random narwhal Feb 18, 2022, 5:42 PM

#

Thanks for listening anyway 🙂 I was going crazy looking at this.

#

I also posted to the Nx Slack channel. Maybe someone there knows something that Nx is doing!

potent depot Feb 18, 2022, 5:44 PM

#

Yes, I dont know nx. But also are you providing the correct Id of the cart when fetching from the Cart app?

#

Ahh I see there's no variable so it just fetches whatever there is

random narwhal Feb 18, 2022, 5:45 PM

#

Correct, the cart has a fixed id "1234" - there is no concept of a cart per user or anything like that.

random narwhal Feb 18, 2022, 6:55 PM

#

@potent depot, @gilded shell - Mystery solved :-). It was the Apollo client that was caching the results, though it does not explain why the full app refresh was not fetching fresh data. Anyway, changed the Apollo Client configuration and everything is working normally: https://github.com/nareshbhatia/proshop-nx/blob/main/apps/cart/graphql/apolloClient.ts#L8-L18

GitHub

proshop-nx/apolloClient.ts at main · nareshbhatia/proshop-nx

Sample shopping app using the Nx monorepo. Contribute to nareshbhatia/proshop-nx development by creating an account on GitHub.

potent depot Feb 18, 2022, 7:17 PM

#

I thought that could be it but apollo client cache is wiped on refresh

#

it's not persisted

#

So that is extremely weird. There are actual packages to have persistence in apollo client, so I don't know how that got persisted. And even across browsers?

#

@random narwhal

#Help - SSR page is cached forever!