Full static still calls /api/

I have a full static setup, i have a module that ensures all routes i want it to prerender at generate as a static file is there.

I still find that if my app is deployed it calls and api route even though i prerendered it.

i tried to download the zipped folder from netlify to ensure my route is there and it is.

The case i find failing is this:

1. Im on my frontpage
2. Navigate to a language route fx /da/
3. the page renders as it should
4. I navigate to a sub page of /da/
5. i click a link navigating back to /da/
6. i get an error rendering the page with the following /api/da/frontpage/ gets 404.
7. if I refresh the page (just normal refresh) it renders the page.

i attached a ss of my zipped folder as you can see does the folder "da" have an index.html
I also attached the network.

Can someone clarify whats going wrong here?

heres the code to clarify:

import { SiteLocale, type SeoField } from "~/generatedTypes";

export default defineNuxtComponent({
    async setup() {
        const { currentRoute } = useRouter();

        const { data, error } = await useAsyncData(currentRoute.value.fullPath, async () => {
            const lang = isSiteLocale(currentRoute.value.params.lang as SiteLocale)
                ? currentRoute.value.params.lang
                : SiteLocale.En;

            const langPrefix = lang === SiteLocale.En ? "" : `/${lang}`;

            const langCheck = lang === SiteLocale.En ? SiteLocale.En : lang;

            const cleanPath = currentRoute.value.fullPath.replace(new RegExp(`^${langPrefix}`), "");

            const apiRoute = `/api${langPrefix}/route${cleanPath.replace(/\/$/, "").replace(/\?.*$/, "")}`;

            let finalApiRoute = "";

            if (langCheck !== SiteLocale.En) {
                if (
                    currentRoute.value.fullPath === `/${langCheck}/` ||
                    !currentRoute.value.fullPath.substring(1 + langCheck.length)
                ) {
                    finalApiRoute = `/api/${langCheck}/frontpage`;
                } else {
                    finalApiRoute = apiRoute;
                }
            } else {
                finalApiRoute = `/api/router/${lang}/route${currentRoute.value.fullPath.replace(`/${lang}/`, "").replace(/\?.*$/, "")}`;
            }

            const fetchedData = await $fetch(finalApiRoute);
            if (fetchedData) {
                return {
                    ...fetchedData,
                    lang,
                };
            }
            return null;
        });

        const headerState = useState("headerState", () => true);

        
        if ((data.value && data.value.pageData && data.value.pageData.seo) || data.value.fallback) {
            const seo = data.value.pageData.seo as SeoField;
            const globalSeo = data.value.globalSeo;
            useSetHead(seo, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        } else {
            const globalSeo = data.value.globalSeo;

            useSetHead(null, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        }

        return { data, headerState, resolvePageView };
    },
});

import { SiteLocale, type SeoField } from "~/generatedTypes";

export default defineNuxtComponent({
    async setup() {
        const { currentRoute } = useRouter();

        const { data, error } = await useAsyncData(currentRoute.value.fullPath, async () => {
            const lang = isSiteLocale(currentRoute.value.params.lang as SiteLocale)
                ? currentRoute.value.params.lang
                : SiteLocale.En;

            const langPrefix = lang === SiteLocale.En ? "" : `/${lang}`;

            const langCheck = lang === SiteLocale.En ? SiteLocale.En : lang;

            const cleanPath = currentRoute.value.fullPath.replace(new RegExp(`^${langPrefix}`), "");

            const apiRoute = `/api${langPrefix}/route${cleanPath.replace(/\/$/, "").replace(/\?.*$/, "")}`;

            let finalApiRoute = "";

            if (langCheck !== SiteLocale.En) {
                if (
                    currentRoute.value.fullPath === `/${langCheck}/` ||
                    !currentRoute.value.fullPath.substring(1 + langCheck.length)
                ) {
                    finalApiRoute = `/api/${langCheck}/frontpage`;
                } else {
                    finalApiRoute = apiRoute;
                }
            } else {
                finalApiRoute = `/api/router/${lang}/route${currentRoute.value.fullPath.replace(`/${lang}/`, "").replace(/\?.*$/, "")}`;
            }

            const fetchedData = await $fetch(finalApiRoute);
            if (fetchedData) {
                return {
                    ...fetchedData,
                    lang,
                };
            }
            return null;
        });

        const headerState = useState("headerState", () => true);

        
        if ((data.value && data.value.pageData && data.value.pageData.seo) || data.value.fallback) {
            const seo = data.value.pageData.seo as SeoField;
            const globalSeo = data.value.globalSeo;
            useSetHead(seo, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        } else {
            const globalSeo = data.value.globalSeo;

            useSetHead(null, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        }

        return { data, headerState, resolvePageView };
    },
});

import { SiteLocale, type SeoField } from "~/generatedTypes";

export default defineNuxtComponent({
    async setup() {
        const { currentRoute } = useRouter();

        const { data, error } = await useAsyncData(currentRoute.value.fullPath, async () => {
            const lang = isSiteLocale(currentRoute.value.params.lang as SiteLocale)
                ? currentRoute.value.params.lang
                : SiteLocale.En;

            const langPrefix = lang === SiteLocale.En ? "" : `/${lang}`;

            const langCheck = lang === SiteLocale.En ? SiteLocale.En : lang;

            const cleanPath = currentRoute.value.fullPath.replace(new RegExp(`^${langPrefix}`), "");

            const apiRoute = `/api${langPrefix}/route${cleanPath.replace(/\/$/, "").replace(/\?.*$/, "")}`;

            let finalApiRoute = "";

            if (langCheck !== SiteLocale.En) {
                if (
                    currentRoute.value.fullPath === `/${langCheck}/` ||
                    !currentRoute.value.fullPath.substring(1 + langCheck.length)
                ) {
                    finalApiRoute = `/api/${langCheck}/frontpage`;
                } else {
                    finalApiRoute = apiRoute;
                }
            } else {
                finalApiRoute = `/api/router/${lang}/route${currentRoute.value.fullPath.replace(`/${lang}/`, "").replace(/\?.*$/, "")}`;
            }

            const fetchedData = await $fetch(finalApiRoute);
            if (fetchedData) {
                return {
                    ...fetchedData,
                    lang,
                };
            }
            return null;
        });

        const headerState = useState("headerState", () => true);

        
        if ((data.value && data.value.pageData && data.value.pageData.seo) || data.value.fallback) {
            const seo = data.value.pageData.seo as SeoField;
            const globalSeo = data.value.globalSeo;
            useSetHead(seo, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        } else {
            const globalSeo = data.value.globalSeo;

            useSetHead(null, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        }

        return { data, headerState, resolvePageView };
    },
});

import { SiteLocale, type SeoField } from "~/generatedTypes";

export default defineNuxtComponent({
    async setup() {
        const { currentRoute } = useRouter();

        const { data, error } = await useAsyncData(currentRoute.value.fullPath, async () => {
            const lang = isSiteLocale(currentRoute.value.params.lang as SiteLocale)
                ? currentRoute.value.params.lang
                : SiteLocale.En;

            const langPrefix = lang === SiteLocale.En ? "" : `/${lang}`;

            const langCheck = lang === SiteLocale.En ? SiteLocale.En : lang;

            const cleanPath = currentRoute.value.fullPath.replace(new RegExp(`^${langPrefix}`), "");

            const apiRoute = `/api${langPrefix}/route${cleanPath.replace(/\/$/, "").replace(/\?.*$/, "")}`;

            let finalApiRoute = "";

            if (langCheck !== SiteLocale.En) {
                if (
                    currentRoute.value.fullPath === `/${langCheck}/` ||
                    !currentRoute.value.fullPath.substring(1 + langCheck.length)
                ) {
                    finalApiRoute = `/api/${langCheck}/frontpage`;
                } else {
                    finalApiRoute = apiRoute;
                }
            } else {
                finalApiRoute = `/api/router/${lang}/route${currentRoute.value.fullPath.replace(`/${lang}/`, "").replace(/\?.*$/, "")}`;
            }

            const fetchedData = await $fetch(finalApiRoute);
            if (fetchedData) {
                return {
                    ...fetchedData,
                    lang,
                };
            }
            return null;
        });

        const headerState = useState("headerState", () => true);

        
        if ((data.value && data.value.pageData && data.value.pageData.seo) || data.value.fallback) {
            const seo = data.value.pageData.seo as SeoField;
            const globalSeo = data.value.globalSeo;
            useSetHead(seo, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        } else {
            const globalSeo = data.value.globalSeo;

            useSetHead(null, data.value.fallback, globalSeo, data.value.lang as SiteLocale);
        }

        return { data, headerState, resolvePageView };
    },
});

Full static still calls /api/

Similar Threads

Similar Threads

Similar Threads