Search code examples
reactjsgatsbyreach-router

In Gatsby, how do I redirect authenticated users from the homepage / to /app without a flash of content?

I'm trying to implement a common user experience for web apps in which authenticated users are automatically redirected from the home page to the app.

For example, upon typing https://example.com/ in the browser, if I'm not logged in I see the home page. But if I am logged in, I'm redirected automatically to https://example.com/app/

I currently have this in my pages/index.js:

if (auth.user) return <Redirect noThrow from="/" to="/app" />;

where Redirect is from @reach/router.

However, when I do this, the non-authenticated home page flashes briefly before the redirect kicks in. Is there a way to do this such that:

  1. There is no flash of content before the redirect happens AND
  2. The home page is still statically generated so that it is indexed properly by Google for SEO

Thanks!

Solution

  • You would need your server to respond to the request for the homepage with a 301–303 response code and a Location header pointing to the desired URL (e.g. /app/).

    Gatsby does not run any kind of server to respond to requests in production, alas, so you can't address this using Gatsby alone without some significant hacks, like hiding all of your content by default, which would result in no content being indexed by Google.