Gatsby SSR: 301 redirects don't work in dev mode or on Gatsby Cloud Preview

[feedm3]

Description

When returning a redirect in the getServeData response, the redirect is not returned in the Gatsby dev mode, but it works when you do a gatsby build && gatsby serve. We also noticed that the redirects don't work for Gatsby Cloud Preview environments (the builds for the pull requests). They work on the Gatsby Cloud production environment which is pushed to Gatsby Cloud Hosting though.

The code we use to handle redirects looks like this:

export const getServerData = async (): GetServerDataReturn => {
  return {
    status: 301,
    headers: {
      'Location': '/'
    }
  }
}

Reproduction Link

• Repository: https://github.com/satellytes/satellytes.com/pull/615
• Gatsby Cloud Preview: https://satellytescommain21751-featmake404ssr.gtsb.io/office/ returns an 404 error instead of a redirect to /about-us/

Steps to Reproduce

The issue can be tested on the pull request here: https://github.com/satellytes/satellytes.com/pull/615

When you run yarn start, the redirect doesn't work. An HTML page is returned instead. Also the follow up page-data.json request returns the correct redirect, but this doesn't lead to a redirect in the browser:

Screenshot

When build on localhost with yarn build and served with yarn serve, the redirect works as expected:

Screenshot

Expected Result

Correct redirects to the URL provided in the Location header.

Actual Result

No redirect at all with gatsby develop or on Gatsby Cloud Preview.

Environment

• gatsby develop
• Gatsby Cloud Preview
• Gatsby v4.14
• React 18

Config Flags

None

[feedm3]

We also noticed that the Typescript Types for the headers in GetServerDataReturn are wrong. When you provide a new Map, the headers are not used. You need to pass an object, which results in a type error:

Works (but has a type error):

export const getServerData = async (): GetServerDataReturn => {
  return {
    status: 301,
    headers: {
      'Location': '/'
    }
  }
}

Type error

Doesn't work (but typing is correct):

export const getServerData = async (): GetServerDataReturn => {
  const headers = new Map();
  headers.set('Location', '/');

  return {
    status: 301,
    headers: headers
  }
}

[LekoArts]

Hi!

When returning a redirect in the getServeData response, the redirect is not returned in the Gatsby dev mode, but it works when you do a gatsby build && gatsby serve

gatsby develop and gatsby serve differ in their setup so it's a matter of also implementing it into develop. It was probably just forgotten.

We also noticed that the redirects don't work for Gatsby Cloud Preview environments (the builds for the pull requests)

Can you please open a bug report with cloud support? https://www.gatsbyjs.com/support/

We also noticed that the Typescript Types for the headers in GetServerDataReturn are wrong. When you provide a new Map, the headers are not used. You need to pass an object, which results in a type error

The types are incorrect here, it should be an object. Feel free to send in a PR fixing it! :)

[feedm3]

Thanks @LekoArts for the response 🙂

• I created a PR for the headers: #35633
• and a support ticket for the Gatsby Cloud support team to make it work with the Gatsby Cloud Preview

For the issue with gatsby develop I assume there is now a "ticket" somewhere and it will be implemented at some time?

Edit: Turns out there is already a suggestion in the forum to make redirects work in Gatsby Cloud Preview - give it an upvote if you read this! https://gatsby.canny.io/gatsby-cloud/p/functional-redirects-in-preview-builds

[feedm3]

Update after merging the 404 SSR page and deploying it to production on Gatsby Cloud:

The 404 page is not triggered with "not found" pages. All we get is a standard 404 page from Gatsby Cloud. I contacted Gatsby Cloud support for this issue.

Code: https://github.com/satellytes/satellytes.com/blob/main/src/pages/%5B...%5D.tsx

@LekoArts Any updates or plans about the fallback SSR page with gatsby dev?

[kdichev]

I am also experiencing this issue with redirects and develop, need to build & serve to test my code which is slightly annoying. If you can point me to where the setup for that is on serve I would be glad to make a PR but have hard time finding it @LekoArts