Static error page (fullstatic or hybrid)

[vampics]

Problem

I've been trying for a few days to generate a fullstatic nuxt build with a 404 page. It seems for me that the most reliable way to do this was only with the fallback site option. My main problem with this fallback option is that the build turns the error page into a complete SPA page (with all client-side store and asyncData requests).

In my case the API of the backend is not public accessible and the page need to be load data for the footer and header via a store. All of these workarounds not working or send request on client-side.

Working with a explicit 404.vue page and not with the error.vue layout brings other problems with the sitemap, statuscodes or urls with i18n. It can be handled, yes, but it shouldnt be such a mess.

Possible Solutions

It would be a nice feature when the error page has only in fullstatic mode features to prerender it without SPA, a static site only for htacess rules like 'ErrorDocument 404 /404.html'.

I understand why it has to be a SPA so it could be an other option to create a hybrid with possibilities to inject data in a render proccess (with nuxtServerInit) and SPA mode.

Thank you :-)

[LeoSeyers]

Working with a explicit 404.vue page and not with the error.vue layout brings other problems with the sitemap, statuscodes or urls with i18n. It can be handled, yes, but it shouldnt be such a mess.

It's exactly what happened to me, I finally removed my 404.vue page because non-existing pages were not correctly redirected (they were catched up by _slug.vue, which is my template for dynamic pages). So I end up back to the fallback property and client-side API call to fetch my footer data, but it's kind of annoying and I'd like to keep those API calls private if possible

[ClementLmn]

Hello @vampics !
Did you find a way to do it 100% static without client-side API call ?

[vampics]

Hello @ClementLmn,

Sorry for the late reply.
Certainly not the best solution but I have found a basic way that fits well into our workflow. For the time being, we are using the method I mentioned to create the 404 as a dedicated page.

NuxtConfig
We exclude everything, disable the fallback and add the 404 page for the generate task.

generate: {
    fallback: false,
    exclude: [
        /^.*$/
    ],
    crawler: false,
    async routes() {

        const generateRoutes = [];

       (... some stuff and get all routes from CMS ...)

        generateRoutes.push('/404');

        return generateRoutes;

    }
}

Pages - error.vue
We created the 404 page in pages

<template>
    <h1>404</h1>
</template>

Layouts - error.vue
To have a 404/error page in dev or start we create the error.vue in layout with an extend of the 404 page in pages.

import ErrorPage from '~/pages/404';

export default {

    extends: ErrorPage,

    props: ['error'],

};

static - .htaccess
Linking a not founded page to the 404 document

ErrorDocument 404 /404.html

Disadvantages/Unsolved problems

• In my example, there is no distinction between running into a 404 or any other error.
• The header error codes must be resolved manually.
• In combination with i18n, htaccess must be used to redirect or rewrite the 404 to the correct language.
• When generating a sitemap, you also have to exclude it. We have the same thing with the sitemap generation as with the nuxt generate.

sitemap: {
    exclude: [
        '**/*'
    ],
    routes: async () => {
       (... some stuff and get all routes from CMS ...)
    }
}

Good Luck!

[ClementLmn]

Hello @vampics !

Thanks a lot for the detailed explanation 👌
Hopefully we'll have something more robust to work with in the future

[agracia-foticos]

Same issue, when i want to create an error.vue with a useFetch... if the useFetch in error.vue fails, redirect to error.vue... we can handle error situation in error.vue :(

[manniL]

Note - the 3.x issue to track is #18718