payloadExtraction does not work for alternate URL (with/without trailing slash) when using catchall

[fahmifitu]

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.2.3
• Nitro Version: 2.2.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Run the following:

npm run generate
npm run preview

• Set browser network to Slow 3G to make the issue clearer

https://stackblitz.com/edit/github-d1s7rg?file=pages/[...slug].vue

Describe the bug

Journey 1: navigating "No Trailing Slash links"
navigation is snappy. no api calls on initial visits or internal routing.
No issues here.

Journey 2: navigating from "No Trailing Slash links" to "Trailing Slash links" internally

• Request is executed. page waits for the payload to be fetched from the api. this seems to only happen with dynamic pages.

• Browsing a static page will not cause a fetch request. check /test and /test/
  -- I noticed that in the fetch, the pending flag of useFetch is never true even though the request is fetching in the background.

• Going back and forth to trailing slash dynamic pages will fetch the page request each time. but note that this is not consistent.
  -- Reproduce by: index page => trailing /blog/ => trailing /support/ => trailing /blog/

-- But sometimes it doesn't do that for some reason: try index page => trailing /blog/ => trailing /support/ => trailing /careers/. requests are only executed on initial visits. going back to any page after this journey will load instantly.

• Doesn't reproduce on static pages.

Journey 3: Initially visiting Trailing Slash link

• Page payload exists in the beginning. but the request is executed anyway.
• Fetch flag is set to true as it should.
• Doesn't reproduce on static pages.

I have another reproduction here
details and reproduction steps: Discord thread

@manniL tagged based on your request

Additional context

No response

Logs

No response

[manniL]

I can reproduce this. It seems that trailing slash URLs do not fetch the payload correctly and fall back to executing the API calls.

[danielroe]

oops 😆

[manniL]

It seems that the auto key from useAsyncData does not match the payload data key in these cases.

This happens because because the path is watched as fullPath, creating different keys for different URLs.

const { data, pending, error } = await useFetch(url, {
  params: {
    path: fullPath.replace(/\/$/, ''),
    acf_format: 'standard',
    _fields: 'acf,title',
  },
});

resolves that.

[fahmifitu]

Thanks for investigating the issue and providing a workaround. I will definitely apply to my project.

I think the issue boils down to the following:

• if /careers payload key is different than /careers/. the payload shouldn't be instantly available in the page while also a request is happening.
• if both links exist in the markup, shouldn't both urls be crawled and pre-generated? since they're treated as different pages internally while crawling.

[manniL]

if /careers payload key is different than /careers/. the payload shouldn't be instantly available in the page while also a request is happening.

It is not. When you access e.g. http://localhost:3000/support/ directly, you will see some flickering and pending: true for a moment.

if both links exist in the markup, shouldn't both urls be crawled and pre-generated? since they're treated as different pages internally while crawling.

I just wanted to add that this is the case (hence the different keys), but only one represantation will be actually saved. So for prerendering, trailing and non-trailing versions are treated the same (and they should be the same), but when using the fullPath, for parameters, this is not the case.
Similar idea when using query strings - that's also something that cannot be considered during generation.

---

It would be great to provide a DX improvement here so people don't have to take trailing slashes into account. This is related to #15462 where we decided not to apply redirects or similar.
Ideally this is taken care of in userland or via platform (e.g. Netlify is only using trailing slashes).

Would love to have some feedback from @danielroe on this topic 😋

[fahmifitu]

You're absolutely right. I think I get it now. I confused myself thinking the data in the pre tag is an indicator that the payload is loaded instantly. but it's just an html generated from the /careers/ (or /careers) payload which is never matched later when visiting the page.

[danielroe]

Yes, this is a tricky one. I think where people are manually providing their own key then there is little we can do to handle a trailing slash in the URL. (I don't think we want to manipulate the route object to remove the trailing slash, for example.) Other ideas would be very welcome though.

[manniL]

(I don't think we want to manipulate the route object to remove the trailing slash, for example.)

I agree, this seems too risky in terms of side effects to me too.

[manniL]

Closing here for now as any ideas on how to interfere/rectify would be more disruptive than helpful. If you are reading this and have an idea - comment please!