Prerender payloads ignored if linking from 404 page?

[moussaclarke]

In an SSG build, when linking from the nuxt content 404 error page to a standard/non-content Vue page in pages/, pre-rendered payloads in the linked page are ignored. Data comes from a server endpoint via useFetch

I'm not sure if this is a bug/unsupported edge case or if I'm doing something wrong or missing some vital piece of config, so thought I should ask the question here before opening an issue.

I've made a minimal repro here: https://stackblitz.com/edit/nuxt-starter-bl68or?file=README.md

Steps to recreate the behaviour in the repro:

• npm run generate
• npm run preview
• click the 'go foo' link. /foo page should load with correct data
• edit the preview url and change foo to baz and press enter to trigger a 404
• click on the 'go foo' link in the 404 page
• /foo page loads but data does not show, as it's trying to fetch from non-existent api instead of using the pre-rendered payload
• refreshing the page will load the pre-rendered payload as expected

Everything works as expected under npm run dev

[moussaclarke]

Possibly related upstream issue? nuxt/nuxt#18718

[moussaclarke]

Ok so in case this helps anyone, the solution for me was to use absolute links in the error page in order to force a reload. It means you lose things like page transitions, but that seems a minor trade off as it's from the error page only.

My real world use case is for a fully static site using a mix of markdown content and external CMS/api data. I have a custom 404 page using a base layout which includes a header nav with internal links, which would then break on the error page in SSG build. I wound up creating two versions of this top nav, one with absolute links for the error page, and one standard one with relative links which will pre-fetch as normal in the main context.

// components/TopNav.vue
<template>
    <nav>
        <nuxt-link to="/foo">Foo</nuxt-link>
        <nuxt-link to="/bar">Bar</nuxt-link>
    </nav>
</template>

// components/TopNavError.vue
<template>
    <nav>
        <nuxt-link :to="siteUrl + '/foo'">Foo</nuxt-link>
        <nuxt-link :to="siteUrl + '/bar'">Bar</nuxt-link>
    </nav>
</template>
<script setup lang="ts">
const config = useRuntimeConfig()
const siteUrl = config.public.siteUrl
</script>

The layout then checks useError() and serves the appropriate one.

<template>
    <div class="container">
        <page-header />
        <top-nav v-if="!error" />
        <top-nav-error v-else />
        <main-wrapper>
            <slot />
        </main-wrapper>
        <page-footer />
    </div>
</template>
<script setup lang="ts">
const error = useError()
</script>

Slightly clunky having to duplicate the nav, but them's the breaks

I also wound up ditching nuxt/content's DocumentDrivenNotFound component in favour of the standard Nuxt error.vue but that's not really relevant to this issue, just didn't see any advantage in deviating from the default Nuxt pattern.