gatsby: 301 redirects adding trailing slashes (gatsby build+serve)

Hello

Description

I have problem with 301 redirects adding trailing slashes (/path => /path/) ONLY when I build+serve my site (gatsby build && gatsby serve && open http://localhost:8000/hi => I get redirected to http://localhost:8000/hi/). Doesn’t happen using gatsby develop.

Steps to reproduce

I have :

no gatsby-browser.js file
no gatsby-ssr.js file
an empty gatsby-config.js file
gatsby-node.js

exports.createPages = ({ actions: { createPage } }) =>
  createPage({
    path: '/hi',
    component: HiComponent,
  });

HiComponent renders hi and that’s it

So… minimum code possible, and still have this issue. Tried gatsby-plugin-remove-trailing-slashes but didn’t do anything, as it is only for pages created from the pages folder.

Expected result

No 301, no redirect

Actual result

Redirection

Environment

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.12.0 - /var/folders/mt/71kkzssd3fq24s3x3y6wpc4h0000gn/T/yarn--1573821730999-0.42525738248781186/node
    Yarn: 1.19.1 - /var/folders/mt/71kkzssd3fq24s3x3y6wpc4h0000gn/T/yarn--1573821730999-0.42525738248781186/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 78.0.3904.97
    Firefox: 65.0
    Safari: 13.0.3

Thanks in advance!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 11
Comments: 21 (16 by maintainers)

Most upvoted comments

We experience this issue on first load and reload on both gatsby develop, gatsby serve and in production. gatsby-plugin-remove-trailing-slashes only changes the links, it doesn’t fix the issue that urls without trailing / will be redirected to a url with a trailing /. Because of this are gatsby-plugin-remove-trailing-slashes actually harming our website links, because all links will result in a url that will redirect on reload.

jokklan on Jul 7, 2020

We managed to resolve this issue as described in my previous comment. It requires two scripts:

The first step requires running the first part of the script that’ll clone all index.html files and move them outside of their parent folder, then rename them to reflect the name of the parent folder + collision prevention suffix needs to be appended since filesystems typically don’t allow a folder and a file with the same name to coexist:

Before:

- grandparent
-   parent
-     index.html

After:

- grandparent
-   parent
-     index.html
-   parent.collision.html (this is a clone of the index.html above)

The second step requires uploading the public folder to S3.
The third step requires running the second part of the script which traverses the S3 bucket and removes the collision prevention extension.

Scripts are available here and one of them is loosely based on the gist I shared above:

https://gist.github.com/mareksuscak/e0a94987a24038a3b81f045602f6274b

mareksuscak on Nov 18, 2020

This issue affects gatsby develop command as well. It only surfaces when you reload the page.

mareksuscak on Dec 4, 2019

Greetings 👋🏻

For those arriving from the Google machine, this discussion was effectively continued and resolved in the following thread within the Discussion section of this repository: https://github.com/gatsbyjs/gatsby/discussions/27889#discussioncomment-254854

Please reference that thread and give it a read for more info on how Gatsby handles trailing slashes and how to configure your particular site (and hosting) to accommodate the particular behavior you’re looking for 👍🏻

jon-sully on Apr 20, 2021

I think i’m running into this same issue, however even if the trailing slash is consistently added/removed this still causes issues with Google SEO as the redirect that adds the slash shows as a 301 and as a result google doesn’t index that page. Is there a way to disable the addition of a slash? e.g. if i go to https://gatsby-blog-no-slash.wardpeet.dev/new-beginnings i can see that the redirect to add the slash is happening and then the slash is later being removed, this would still cause issues with google indexing.

NickAJScott on Jun 17, 2020

Ideally, the remove-trailing-slashes plugin would enforce this.

So i’ve spent more time researching this. I’m more convinced now that Gatsby is actually doing the right thing. For reference read this article: https://searchfacts.com/url-trailing-slash/

As long as the trailing slash is always removed, the worry of Google seeing URLs differently won’t be a problem.

aleclarson on Apr 29, 2020

This issue also pops up in gatsby serve when you do a hard refresh Ctrl+Shift+R. It changes the URL from mysite.com/about to mysite.com/about/.

@blainekasten OP has already tried using gatsby-plugin-remove-trailing-slashes without success. It’s mentioned in the issue. Any other suggestions for workarounds?

varunagrawal on Apr 9, 2020

So i’ve spent more time researching this. I’m more convinced now that Gatsby is actually doing the right thing. For reference read this article: https://searchfacts.com/url-trailing-slash/

In addition, did you know that we have plugins for adding and removing slashes? I wonder if those would solve your needs instead of changing the way the codebase works. gatsby-plugin-remove-trailing-slash

blainekasten on Feb 11, 2020