Statically generated dynamic pages in Nextjs are not served from cache

[ishaqibrahimbot]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

ds9myrwx73uix

AWS Region

ap-southeast-2

Amplify Hosting feature

Deployments, Frontend builds, SSR

Describe the bug

I have a Nextjs v12.2 app deployed on Amplify with the WEB_COMPUTE platform. As part of this, I have some dynamic routes for which I am statically generating some paths using getStaticPaths.

In the Frontend build logs, these paths show up as successfully generated. However, when I try to access those paths, I get the fallback mode and it takes a while for the actual page data to come through. So basically these paths weren't really cached.

Expected behavior

Paths that are statically generated at build time should be served from the Nextjs cache and I should get the rendered HTML on the first request instead of getting the fallback mode.

Reproduction steps

Not sure how to describe reproduction, but here's how I get the bug:

• Make a dynamic path in the project, e.g. pages/[...path].tsx
• Add a getStaticPaths function and return some valid paths from it
• Build the application
• View the frontend build logs to note the paths that were statically generated
• Visit those paths

Build Settings

No response

Log output

``` # Put your logs below this line ```

Additional information

I've checked the headers on a lot of pages including non-dynamic ones such as the homepage of my app, and it looks like none of these are hitting the nextjs cache either. I'm getting a constant MISS for the x-nextjs-cache header. The non-dynamic ones are instead coming from Cloudfront's cache.

[Jay2113]

Hi @ishaqibrahimbot 👋 , thanks for reaching out to us!

Just a quick note here, I am working on reproducing this behavior on my end and will keep you posted on the findings.

Thanks!

[ishaqibrahimbot]

Hey @Jay2113. did you find anything? 😄

Edit: Have some more information for you. I created a new Amplify project in another AWS account. Here's what I found that was consistent across both of my Amplify projects:

• I tested several dynamic routes that are of the form pages/category/[slug].tsx, pages/product/[slug].tsx, pages/blog/[slug].tsx. The caching behavior, although I noticed it, is pretty random and short-lived. A page gets cached after refreshing several times, then on the very next refetch it goes back to fallback despite an s-maxage: 43200 header being present on the cache hit version.

Examples of this:

1. https://develop.d35wgr4vxwu7j7.amplifyapp.com/blog/koorong-digital-transformation
2. https://develop.d35wgr4vxwu7j7.amplifyapp.com/category/bibles
3. https://develop.d35wgr4vxwu7j7.amplifyapp.com/product/amplified-battlefield-of-the-mind-bible-joyce-meyer_9781455595303

• The catch-all dynamic route pages/[...path].tsx just doesn't seem to be getting cached at all, no matter how many times I refresh/refetch.

Example:

1. https://develop.d35wgr4vxwu7j7.amplifyapp.com/bible-guide

• I ran a preview build with a set of paths in getStaticPaths and fallback: false for the pages/[...path].tsx route. The build logs report that all those paths were generated successfully. However, I get a 404 whenever I visit any of those pages.

Maybe this helps you debug the issue better? 🙂

[ishaqibrahimbot]

Hey @Jay2113! Is there any update about this? My project is really close to launch so I would really like to solve this issue. Thanks 🙂

[miki725]

I ran a preview build with a set of paths in getStaticPaths and fallback: false for the pages/[...path].tsx route. The build logs report that all those paths were generated successfully. However, I get a 404 whenever I visit any of those pages.

I am seeing same behavior where logs show pages being prebuilt but they show as 404

next version:

➜ cat package.json | grep '"next"'
    "next": "13.4.10",

[alex-anikeev]

Any progress on this or known workarounds?

[ishaqibrahimbot]

Any progress on this or known workarounds?

@alex-anikeev We figured out that the issue was with ISR. If your use case can bear it, I would suggest not using ISR for your dynamic routes. We started getting correct cache hits from the nextjs server when we did that.