Gatsby: Serve different pages on the same URL

[kareldurdis]

Summary

Hi,
I'm trying to serve different pages on the same URL according to HTTP Header.
I've generated /somePage/abc and /somePage/xyz variants and I'm doing the internal rewrite on nginx to serve the correct one on /somepage URL.
The rewrite works just fine, but when the JS bundle loads it redirects me to 404 as it doesn't know the /somePage path.

Environment (if relevant)

npmPackages:
gatsby: ^1.9.241 => 1.9.241
gatsby-link: ^1.6.39 => 1.6.39
gatsby-plugin-react-helmet: ^2.0.8 => 2.0.8
gatsby-plugin-react-next: ^1.0.11 => 1.0.11
gatsby-source-filesystem: ^1.5.27 => 1.5.27

File contents (if changed)

gatsby-node.js: part that generates the variants

        variants.forEach((variant) => {
          createPage({
            path: `/${targetSlug}/${variant}`,
            component: pageComponentPath,
            layout: LAYOUT,
            context: {
              variant,
            },
          });
        });

What is the correct approach to this kind of problem? Am I missing something on how to "fool" the JS router, or something else? Thanks in advance.

[LekoArts]

If I understood you correctly:
Have a look at the „pathPrefix“ option

[KyleAMathews]

Hey! We've talked about the idea of supporting page "variants" but this has happened yet. This would need to be supported in core so that you can say that page x is really y once it loads.

[vovacodes]

@KyleAMathews do you have already some thoughts or considerations how to implement it in the core, maybe we could help with contributing this functionality

[millette]

How would a static http server know how to deal with this? Wouldn't it depend on nginx, apache http, etc.?

For instance, if I want index.html.en and index.html.fr to serve content based on negotiated language, I have to setup the http server for it, or is there a generic way?

Also, I would rename the issue to something like "Serve different representations of a page based on headers".

[KyleAMathews]

do you have already some thoughts or considerations how to implement it in the core, maybe we could help with contributing this functionality

Not a ton but basically it'd need to extend Gatsby's "page" concept to include the idea of variants which would mean adding support for this to createPage and to our page matching in the runtime.

[vovacodes]

@millette serving the page is not a concern of Gatsby, so yes the logic of picking up the right page has to live on your HTTP server. The logic could be based on anything pretty much, not only headers.
E.g. during maintenance when user visits my mywebsite.com/welcome I would like to serve the page from gatsbyBuild/maintenance.html instead of gatsbyBuild/welcome.html while preserving the URL in the browser (do rewrite instead of redirect).

The issue right now is that I cannot do this because JS bundle that comes with the page checks window.location and downloads the JS chunks for that URL (welcome.js in our case). That JS chunk then runs and corrupts the page entirely because it tries to render (reconcile) the React tree for the welcome page.

[b4stien]

Hi there. At my company we'd be willing to contribute time (or money) to contribute on this issue, do you have any other reference where this question has been discussed?

(our use case is server side AB testing where we want to send a variant of the requested page)

[KyleAMathews]

Not afaik! But happy to jump on a call with you sometime to discuss the idea. There'd need to be an RFC written up before we start implementation.

[joseflores8082]

any updates on this? or possible work arounds? I I would love to work with someone to get this feature introduced.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[ArpitaSrivas]

Hi,

Any updates on this? Are we going to have the support of page variants in future?

[geraldstrobl]

@ArpitaSrivas I have the same issue.