Nuxt, Netlify and the trailing slash

Introduction

I recently noticed that by default Netlify redirects routes that don't end with a slash to their slash equivalent: for example www.example.com/about → www.example.com/about/ Netlify docs

This only happens to pages served directly by Netlify, in other words, pages served on the first load. As you know it, Nuxt then hydrates into a SPA and Vue Router takes care of the navigation. However, as soon as you refresh the page, you will be redirected to the URL with a trailing slash.

Negative Impact

If you don't use a trailing slash for both your internal links and your sitemap, the default redirection by Netlify can have some unwanted consequences. I can think of two:

1. Performance: I didn't measure it myself, but a comment on the Gatsby repository reports a delay of 100-300 ms, and even of 1s on a slow network. By the way, when doing a lighthouse audit on the page without the trailing slash, you'll get a warning about the redirection.
2. SEO: Google may be confused by the two URLs. Its crawler will index the routes with a trailing slash because of the Netlify redirect, but then will also index the routes without the slash because of the sitemap (by default, the Nuxt sitemap module doesn't add trailing slashes). If you don't use canonical links, the crawler might consider the content as duplicates. Fortunately in all my projects, I saw from the Google Search Console that the crawler was smart enough to discard one version. But SEO is too important to rely on the cleverness of Google.

Solution

How to solve this issue? First let's get this out of the way: it doesn't make any difference whether we use a trailing slash or not. What's important is to be coherent. So is it a matter of taste? At first I would have said yes. But actually I personally realized that when browsing websites, I really don't pay much attention to the URL, let alone to the presence of that slanted bar.

I would say that it's more a matter of tooling: don't fight the tooling! In our case, we want to choose one version, but Netlify can only force the trailing slash and not the opposite (at least I didn't find how, but at least you can still disable the forced redirection to the trailing slash).

Adding a trailing slash to our internal links

Now we need to update all our internal links with a trailing slash. Depending on the size and the complexity of the project, it's likely that we miss a couple. But no worry, even without a trailing slash, the navigation will still work as expected. By default, Nuxt handles both versions. However, for new projects, I recommend enforcing the trailing in nuxt.config.js:

router: {
    trailingSlash: true,
},

When developing, we'll now be able to easily spot nuxt-link without a trailing slash, because they will return a 404.

Editing our sitemap

Then we need to take care of our sitemap. We're in luck again! There's a trailingSlash property which can be set to true:

sitemap: {
    hostname: 'https://www.mywebsite.com',
    trailingSlash: true,
},

Voilà! Now we've fully committed ourselves to the trailing slash. 🤗
Don't hesitate to correct me in the comments if I said something inaccurate. 🙊

A little reminder

I take the opportunity to remind my fellow devs that the following properties are not needed for the sitemap module when using nuxt generate:

• setting cacheTime. This option has no effect in static mode.
• setting routes to the same value as generate.routes. By default, the sitemap module will use the dynamic routes defined in generates.routes.

Sources

Preventing 301 redirects on URLs with no trailing slashes (Netlify)
Hero image by Noora AlHammadi