Redirect User to 404 page using edge functions

Support
,
1

Hi,

I have a website where we list Jobs openings. I am using react and a python backend. We need to return a 404 response(for search engines) and show a custom 404 page to the user if the job is expired without changing the URL. Is it a good idea to use edge functions and hit the backend API every time when a page is opened and return a 404 response if the job is expired? Something similar to the code below. It might lead to slow loading of the website. Or is there another way to return 404 after getting a response from the server?

export default async (req: Request, { next }: Context) => {
  const res = await next({sendConditionalRequest: true});
  if (res.status != 404) {
    return;
  }
  const html = `<!DOCTYPE html>
            <html lang="en">
              <body>
                Page Not Found
              </body>
            </html>`;

    return new Response(html, {
        headers: {'content-type': 'text/html'},
        status: 404
    });
};
2

I’m a little confused.

It seems like the next chain in your functions (which might be the page directly) is already sending you 404 status. How exactly are you using this Edge Function? Since you seem to be able to get a 404 from next(), I am not sure if you really need it. Where does next() lead you to?

3

I am not doing server-side rendering. Also, I am using react so I am not able to return a 404 response code from my page and the search engine crawlers see it as a soft 404. I am just asking if it is a good idea to hit the backend server through the edge function every time to check if a particular page needs a 404 response code and show that as it leads to slow loading of the page. Is there any other way to return a 404 response code without changing the URL?

4

It depends on “how much traffic do you expect on your site?” Is that something:

  1. Your backend can handle?
  2. You can consider profitable in terms of Edge Functions bill once it’s out of beta and we know more about the pricing?

There’s no easier way to do that, but if you’re worried about the above factors, there might be a way to make this a little more performant while compromising developer time, project complexity, and possibly maintainability to some extent. Let us know if you’re interested in hearing that.

5

Got it. Is there any other way apart from the edge function to return 404? One way I can think of is to redirect through netlify.toml file and return 404 page. But it will lead to change in the URL.

6

One (another - different than the one I previously thought) way I can think of is use a similar idea that Next.js uses. It provides an option called getStaticPaths(). In some sense, this function fetches all the possible values for the dynamic paths, so it knows which path will give a 200 and which will give a 404.

You can implement something similar. During a site build, you can call your backend, and build a blank HTML page for all available IDs. This blank page simply needs to load your site’s JS bundle. Depending on the frequency you expect the IDs to change their status, you can decide to rebuild the site. Also, to avoid calling your backend for let’s say 10,000 IDs, you can cache the list of posts across site builds.