404 on initial render of Dynamic Routes

[niteshsrivats]

Description

createPage({
    path: '/projects/:id/',
    matchPath: '/projects/:id/',
    component: path.resolve('./src/components/Product.js'),
  })

The first initial render for hostname/products/:productId displays a 404 for a split second before the Product Component is rendered.

On inspecting the production build (public folder) of the generated files. the HTML file created exists in public/products/*id/index.html.

I believe this is likely due to hostname/products/:productId/index.html not existing. I believe the 404-page loads' gatsby and which then renders the correct component?

Suggestions

Maybe add a section or a page in the documentation for how to implement use cases such as product pages, etc.

Steps to Reproduce

View the Problem

I've gone ahead and created a link to see the issue. It's very noticeable in the production environment.

https://adoring-beaver-2c7577.netlify.app/products/CSsr9amXw0Xkx4c293dd/

If I link the same URL through the home page or any other static page, the problem does not occur.

Reproducable Repository Link

https://github.com/niteshsrivats/gatsby-dynamic-routing-bug/

Resources I've checked

I've spent some time looking at previous dynamic routing issues, client-only-paths in gatsby docs, and Stack Overflow.

Expected result

The page should render directly without a 404 page first being rendered.

Actual result

The page initially renders a 404 page before rendering the correct component.

Environment

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 10.19.0 - /usr/bin/node
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: 85.0.4183.102
Firefox: 81.0.2
npmPackages:
gatsby: ^2.24.79 => 2.24.79
npmGlobalPackages:
gatsby-cli: 2.12.111

[wardpeet]

What if you do? Path is what's used as your root and be statically created on build. MatchPath will be used for all dynamic routes.

Fore mor info see https://www.gatsbyjs.com/docs/client-only-routes-and-user-authentication/

createPage({
    path: '/projects/',
    matchPath: '/projects/:id/',
    component: path.resolve('./src/components/Product.js'),
  })

[niteshsrivats]

Hi @wardpeet The solution I implemented is similar to what you suggested.

createPage({
    path: '/projects/id/',
    matchPath: '/projects/:id/',
    component: path.resolve('./src/components/Product.js'),
  })

However, the problem with this approach is server redirects need to be set up, like /projects/:id/ to /projects/id/ at least on Netlify.

If redirects are not in place, the first render is still a 404. I'm not sure if this is a problem with Netlify or Gatsby itself. I understand that since it's SSR, the initial request cannot find the correct index.html file which is possibly the reason for the initial render being 404.

I tried hosting with Firebase and the initial render wasn't a 404. This possibly could be because of better servers or ever higher bandwidth. I'm planning on running a few tests later. I would really appreciate a brief explanation for why you think the first render is a 404 and if you think this is an issue with Gatsby or if it's isolated to Netlify servers.

[wardpeet]

Please follw what I posted :) Remove /id/ from your path. If you're on netlify please make sure you install https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/