azur Posts - Answer Overflow

azur

Explore posts from servers

•Created by azur on 10/24/2024 in #❓・help

Trailing slash routes not working on Vercel with SSG

I have following scenario in my Nuxt 3 app.

// https://nuxt.com/docs/api/configuration/nuxt-config
const routes = [
    '/A/',
    '/B/',
    '/C/D/',
]

export default defineNuxtConfig({
    devtools: {
        enabled: true,
        timeline: {
            enabled: true,
        },
    },
    compatibilityDate: '2024-04-03',
    ssr: true,
    nitro: {
        preset: 'vercel',
        prerender: {
            crawlLinks: false,
            routes: [
                ...routes
            ]
        }
    }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
const routes = [
    '/A/',
    '/B/',
    '/C/D/',
]

export default defineNuxtConfig({
    devtools: {
        enabled: true,
        timeline: {
            enabled: true,
        },
    },
    compatibilityDate: '2024-04-03',
    ssr: true,
    nitro: {
        preset: 'vercel',
        prerender: {
            crawlLinks: false,
            routes: [
                ...routes
            ]
        }
    }
})

I also have one "catch-all" component in my pages directory. pages -> [...slug].vue

<script setup lang="ts">
const { data } = await useFetch(`/api/page?slug=test`);
</script>

<template>
  <div>
    <TemplateRenderer :page-template="data?.title || 'No title'" />
  </div>
</template>

<style scoped>

</style>

<script setup lang="ts">
const { data } = await useFetch(`/api/page?slug=test`);
</script>

<template>
  <div>
    <TemplateRenderer :page-template="data?.title || 'No title'" />
  </div>
</template>

<style scoped>

</style>

TemplateRenderer.vue just displays page-template prop. When I build this locally and test it SSG is working fine, however on Vercel SSG doesnt work for routes ending with trailing slash (if I visit for example /A/ or /A, SSG will not work, instead the site will be SSR-ed). I've also tried to prerender routes without trailing slash, in that case prerendering works. However if I navigate for example to /A/ Nuxt will navigate me back to /A (it's not a server redirect, but it's happening on Vue router level). This is sadly quite cruical to me since I'm tracking certain kind of data on my webpage and it gives false analytics (bounce rate is showing false values due to this). So any help or tips how to overcome this error either on Vercel or Nuxt level would be much appreciated.

5 replies

Gaming

Programming