Contact Us link loads a bunch of JSON

[eatyourgreens]

Describe the bug

trim.9854FD57-532F-4C98-B592-6BC0AAD91127.MOV

To Reproduce

https://planethunters.org
Click Contact Us in the page footer.

Expected behavior

You should go to the contact page.

[eatyourgreens]

You can also reproduce this with the About link at the top of the page. JSON page props being cached by the CDN, I'd guess.

trim.C239F7E3-39F3-4ED1-82E1-C5B5889448FD.MOV

[eatyourgreens]

The About URL seems to be generally broken, which would happen if a Next.js JSON file has been cached for that URL. The default lifetime for shared caches is 1 year in Next.js.

trim.9484F873-CE03-4568-9D1C-F61836972B56.MOV

[eatyourgreens]

Posting a link here to confirm that it is the URL itself that is broken.

https://www.zooniverse.org/about

That link downloads a JSON file on my phone.

[goplayoutside3]

Thanks Jim we’re aware of this behavior with the fe-root app and working on a fix

[goplayoutside3]

This is mitigated for now by pointing all /about and /get-involved requests to fe-content-pages (Pages Router) instead of fe-root (App Router). Leaving this Issue open though, until a path forward is found for hosting a Next.js App Router with Azure Front Door.

Further reading: vercel/next.js#49140

[eatyourgreens]

I’ve run into problems with Zooniverse FrontDoor, in the past, because FrontDoor ignores query parameters by default. So it might be worth double checking that query parameters are enabled, in FrontDoor, for these URLs. Next.js adds a _rsc param to the RSC request, because FrontDoor (and CloudFlare) can’t cache based on the Vary header.

vercel/next.js#50970

Here are the requests for fe-root in Firefox on my MacBook. The request URL for the About page RSC is https://fe-root.preview.zooniverse.org/about?_rsc=1ea1r. You're seeing problems in production because FrontDoor is ignoring that _rsc parameter and caching the response as https://www.zooniverse.org/about. If you enable query params for URL caching in FrontDoor, that should fix the problem. I remember having to do this for the project app, a few years ago. I'm pretty sure I enabled query params in FrontDoor for www.zooniverse.org/projects but I don't remember if I also enabled them for www.zooniverse.org/about.

[eatyourgreens]

A single Next.js app can run the pages router and the app router side-by-side, so you could copy the pages router into app-root if you want to get rid of the fe-content app. NB. I haven't actually tried this, only read it in the Next.js documentation.

[eatyourgreens]

By the way, the new About page takes more than 9s to run on a low-end mobile device (and 1.5s on desktop.) Over half of that is the YouTube embed on mobile, so I'd recommend switching to lite-youtube-embed (see #6255.)
https://pagespeed.web.dev/analysis/https-www-zooniverse-org-about/i19qhfpoqf?form_factor=mobile

[eatyourgreens]

The How It Works section also uses invalid HTML lists (<ul> can only contain <li>, not divs), which may make it hard to navigate and read with a screen reader.

[goplayoutside3]

I'd recommend switching to lite-youtube-embed

Agreed, but your comment is unrelated to this Issue.
Please create a separate one, or comment on #6255

The How It Works section also uses invalid HTML lists

Also unrelated to this Issue. Please create a separate one if you'd like to track it using Github.

[goplayoutside3]

I'm pretty sure I enabled query params in FrontDoor for www.zooniverse.org/projects but I don't remember if I also enabled them for www.zooniverse.org/about.

Caching query params was never enabled for any "www" url. It was enabled for frontend.preview, so that might what you're remembering from a couple of years ago.

Next.js adds a _rsc param to the RSC request, because FrontDoor (and CloudFlare) can’t cache based on the Vary header.

True. Caching with query params is now enabled for all of www.zooniverse.org in FrontDoor config.

All /about and /get-involved have been pointed to fe-root.zooniverse for a few days now without issue so I'm going to close.