Redirects in deep paths in netlify.toml

Support
,
#1

Problem:

Path I want to redirect:
/[lang]/cars/[brand]/[model]/[id] --> /[lang]/cars/fallback?id=[id]

The idea is that we have a list of cars that are being fetched dynamically as they change quite a lot. But that means when people try to go to this detail page, the page isn’t actually build yet (since the build process takes around 10 minutes or so). That means 10 minutes of potential lost clicks to a not found page.

Let’s say there are 10 brands & 30 models per brand, which gives quite a big combination. (I’ve seen some solutions with scripts generating all those URL’s not sure if this is the best way to go though?)

Preferably I would like to do this with real redirects to avoid having to go to the not found page first and then having this custom component page get the redirect url, to then fetch the car dynamically (although this is still better than having “not-found” pages)

I hope the problem is clear. Maybe anyone here as a better solution to this problem!

Thanks in advance!

#2

Hey @BramDecuypere,

I’m not sure if I follow. How come your users would be navigating to a page which you’re trying to redirect to? I mean, the content wasn’t there before. How would they know it’s there yet?

There’s no reason why you should be sending users to a 404.html if the redirect is there! In fact, in my experience, 404.html files and redirects don’t work together very well. If you’ve got a 404.html, perhaps consider a ‘not-found.html’ and, at the end of your redirect, have a rule such as /* /not-found.html 404 in order to catch anything which doesn’t exist.

#3

Hey @Pie

Thanks for the response. I understand it’s a bit confusing. Let me try to clarify it as much as I can.

The reason for this is that cars dynamically get added to our website through a backoffice. There is a separate backend that deals with this. So our ‘front-end’ is not really aware of those changes until the webhook tells it to rebuild that page.

There are 2 pages to take into account:

  • A ‘list’ where all the cars are shown - these cars get dynamically fetched (ordered by the latest added)
  • A detail page that shows more extended data about the item that they can click on from the catalog.

So the userflow would be:

  1. A car is dynamically being added.
    –> Webhook send to netlify to start building that webpage (build takes 10 minutes)

  2. Users would be navigating on the website seeing that car that has just been added and try to click on it. The link to this single detailpage is in the format:
    /[lang]/cars/[brand]/[model]/[id]

  3. The user would get a 404 because this page has a 10 minute window inside the build process, resulting in an error, because there is no HTML page found at this address (it is still being build)

  4. We would redirect this 404 to a dynamic ‘fallback’ page that would dynamically fetch the car. If the car is not found, it would just show a not found component. Else it would show the detail page as it would when it did found the HTML.

Hope that clarifies it a bit, if you have any other questions, please let me know!

Keep in mind that this is ‘safety mechanism’ to make sure people don’t get on car pages that are actually there but are just being handled inside the netlify build process.

Obviously, the reason we are prebuilding those pages is because of SEO/speed purposes. And it has been working really great for us in most cases, only in this specific case, there is a timewindow that allows for an 404 that we are trying to avoid.

Kind regards

Bram

#4

Hey Bram,

Interesting edge case! I could sit here and explain a few other things which could help (caching more data, evaluating if your build is optimised) but, let’s get down to it.

The rule that you’ll need is as follows:

/:lang/:cars/:brand/:model/:id /:lang/:cars/fallback?id=:id 301

Let me know if this works for you!