Nuxt•5w ago

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.

2 Replies

kapa.ai•5w ago

Hi @azur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and potential solutions to your issue with trailing slash routes not working on Vercel with SSG in your Nuxt 3 app. 1. Trailing Slash Handling: The issue you're experiencing might be related to how Nuxt and Vercel handle trailing slashes. As mentioned in a GitHub pull request fix(nuxt): remove trailing slash before checking if prerendered (https://github.com/nuxt/nuxt/pull/24516), Nuxt strips trailing slashes when creating the app manifest. This change was made to improve consistency in route handling. 2. Prerendering Configuration: Your current configuration uses the nitro.prerender.routes option to specify the routes for prerendering. However, there might be a discrepancy between how these routes are defined and how they're actually handled during the build process. 3. Vercel Compatibility: It's worth noting that there might be some compatibility issues between Nuxt's prerendering and Vercel's handling of routes. The Nitro documentation for Vercel deployment (https://nitro.unjs.io/deploy/providers/vercel#api-routes) mentions some differences in API route handling, which might extend to other routing aspects. To address your issue, you could try the following approaches: 1. Remove Trailing Slashes: Instead of defining routes with trailing slashes, try removing them from your routes array:

const routes = [
    '/A',
    '/B',
    '/C/D',
]

const routes = [
    '/A',
    '/B',
    '/C/D',
]

2. Use routeRules: You can use routeRules in your Nuxt config to handle trailing slashes consistently. Add this to your nuxt.config.ts:

export default defineNuxtConfig({
  // ... other config
  routeRules: {
    '/**': { prerender: true }
  }
})

export default defineNuxtConfig({
  // ... other config
  routeRules: {
    '/**': { prerender: true }
  }
})

This will prerender all routes, including those with and without trailing slashes. 3. Use prerenderRoutes: As an alternative, you can use the prerenderRoutes utility in your pages to hint additional routes for prerendering. In your [...slug].vue component, you could add:

<script setup lang="ts">
const { data } = await useFetch(`/api/page?slug=test`);
prerenderRoutes(['/A/', '/B/', '/C/D/']);
</script>

<script setup lang="ts">
const { data } = await useFetch(`/api/page?slug=test`);
prerenderRoutes(['/A/', '/B/', '/C/D/']);
</script>

This approach is described in the Nuxt documentation for prerenderRoutes (https://nuxt.com/docs/api/utils/prerender-routes). 4. Vercel Configuration: You might need to adjust your Vercel configuration to handle trailing slashes correctly. Unfortunately, the provided knowledge sources don't contain specific information about Vercel's handling of trailing slashes with Nuxt 3. 5. Custom Server Middleware: As a last resort, you could implement a custom server middleware to handle redirects for trailing slash routes. Here's an example based on a Stack Overflow post:

const redirect = (req, res, next) => {
  const uri = req.url;
  if (!uri.endsWith('/')) {
    res.writeHead(301, { Location: uri + '/' });
    res.end();
  } else {
    next();
  }
};

export default redirect;

const redirect = (req, res, next) => {
  const uri = req.url;
  if (!uri.endsWith('/')) {
    res.writeHead(301, { Location: uri + '/' });
    res.end();
  } else {
    next();
  }
};

export default redirect;

Stack Overflow: Nuxtjs canonical URL are getting overridden on production (https://stackoverflow.com/questions/77064938) Remember to test these solutions thoroughly, as they may have different effects depending on your specific setup and requirements. If these solutions don't resolve your issue, you might want to open an issue on the Nuxt GitHub repository, as this could be a bug or an edge case that needs attention from the Nuxt team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@1298237627304251448> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Trailing slash routes not working on Vercel with SSG