fix: prevent over-prefetching

[moonmeister]

• Fix navs and index pages from prefetching tons of content when rendered to the screen
• Fix Links from re-prefetching on every hover

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-fix-over-fetching	https://hd…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[moonmeister]

It seems Next link should be handling no re-prefetching...https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx#L132-L187. I'm still unsure on why it's not working.

[moonmeister]

Some more info: This is a Feature™️ of ISR. See: vercel/next.js#40268

TL;DR

The content "could have" changed in the background between hovers. In theory, these should return 304s and be relatively cheap.

On the WPE hosting, that theory breaks down 😮‍💨 More below.

Testing

In testing on localhost, I can reproduce this with minimal reproduction. Adding a revalidate time to a page's static props means it starts bypassing the deduplication. Note the valid cache-control headers

Problem

In theory, Cloudflare should cache these requests and respond with fresh content. See in the response below how CF only ever responds "Expired." The next server is registering a "HIT," but the CF cache isn't being refreshed. I'm not entirely sure why Next itself isn't responding with a 304, but it's not. Anyway, the issue here really seems to be incorrect cache headers.

My Realization

I had "No Cache" checked in dev tools. 🤦🏻 No, that's unchecked...304s are happening. The last remaining oddity is why no docs page other than /docs/ has a cache-header that matches its ISR config...all others are coming back as public, max-age=0, must-revalidate. Which isn't helping.

Okay, I'm confused. I'm seeing pages vary between public, max-age=0, must-revalidate and s-maxage=600, stale-while-revalidate=31535400. Gonna merge this as is as watch some things.

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-fix-over-fetching	https://hd…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-fix-over-fetching	https://hd…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[Fran-A-Dev]

LGTM