search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 30 forks source link

Contact Us link loads a bunch of JSON #6282

Closed eatyourgreens closed 2 days ago

eatyourgreens commented 6 days ago

Describe the bug

https://github.com/user-attachments/assets/4f18f116-279b-49c3-b062-3fe5c92ff0af

To Reproduce

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

Expected behavior

You should go to the contact page.

eatyourgreens commented 6 days ago

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.

https://github.com/user-attachments/assets/34e94092-3e6b-4480-b81d-471e6be8fe8a

eatyourgreens commented 6 days ago

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.

https://github.com/user-attachments/assets/6b34eb8a-6361-4f6e-8e0c-b10e9884bbc4

eatyourgreens commented 6 days ago

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 commented 6 days ago

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

goplayoutside3 commented 6 days ago

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: https://github.com/vercel/next.js/pull/49140

eatyourgreens commented 6 days ago

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.

https://github.com/vercel/next.js/pull/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.

The About page in Firefox, with the Network panel open to show that React Server Components are requested with a _rsc query parameter.
eatyourgreens commented 6 days ago

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 commented 6 days ago

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 commented 6 days ago

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.

Screenshot of the As A Participant list on the About page, with the DOM inspector open to show that it is using invalid HTML.
goplayoutside3 commented 6 days ago

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 https://github.com/zooniverse/front-end-monorepo/pull/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 commented 2 days 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.

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.