Redirection in NestJS

Understanding HTTP Redirection: A Brief Overview

HTTP redirection is a mechanism used by web servers to instruct browsers to navigate from one URL to another. This process is crucial for various scenarios, such as when a page has permanently moved or when a temporary redirect is needed. Two common status codes used for redirection are 301 (Moved Permanently) and 302 (Found or Moved Temporarily).

301 (Moved Permanently):

• A 301 status code indicates that the requested resource has been permanently moved to a new location.

• Browsers and search engines interpret this as a permanent change, and they update their records accordingly.

• This is useful when you want to divert your traffic to your new URL.

302 (Found or Moved Temporarily):

• A 302 status code indicates that the requested resource has been temporarily moved to a different location.

• Browsers understand this as a temporary redirection and may continue to use the original URL for future requests.

• This is beneficial when you need a temporary redirect, such as during maintenance or when testing a new page.

Implementing Redirection in NestJS

Now, let's delve into the provided NestJS code that demonstrates how to implement redirection using these HTTP status codes.

Since you are following a series, your NestJS project should be up and running.

Create a new controller by the name of redirect:

nest g controller redirect

Paste the following code in src/redirect.

import { Controller, Get, Redirect } from '@nestjs/common';

@Controller('redirect')
export class RedirectController {
  @Get('youtube')
  @Redirect('https://www.youtube.com/@hasabTech', 301) //permenant
  redirectToNewUrl301() {
    console.log('Permenant!');
  }

  @Get('github')
  @Redirect('https://github.com/hasabTech', 302) //temporary
  redirectToTemporaryUrl302() {
    console.log('Temporary!');
  }
}

Code Explanation:

1. Decorator Usage:

• The @Controller decorator is used to define a controller for handling HTTP requests related to redirection.

• The @Get decorator specifies that the following method should handle GET requests for the specified route.

2. Redirection Implementation:

• The @Redirect decorator is employed to specify the target URL and the HTTP status code for redirection.

• In the redirectToNewUrl301 method, a 301 status code is used for a permanent redirect to the YouTube channel.

• In the redirectToTemporaryUrl302 method, a 302 status code is used for a temporary redirect to the GitHub profile.

3. Code Execution:

• It's important to note that the code block following the redirection decorator (return { url: 'https://www.google.com/' };) will be executed in 302 but not in 301.

Execution

When you hit in browser:

localhost:3000/redirect/youtube

You will be navigated to our YouTube channel.

But, when you hit this in browser:

localhost:3000/redirect/github

Then, you would rather be re-directed to the Google page. This is because in 302, the method below @Redirect() is executed, so make sure that you early return it in case the method has some code which is under development so that the users can successfully (temporarily) be navigated to the updated URL.

Update it like this:

@Get('github')
  @Redirect('https://github.com/hasabTech', 302) //temporary
  redirectToTemporaryUrl302() {
  return
    //This will be executed!
    return { url: 'https://www.google.com/' };
  }

By understanding HTTP redirection and reviewing this NestJS code, developers can effectively manage URL transitions, ensuring a smooth user experience and proper handling of changes in website structure.

If you’re a visual learner, check out the following video tutorial for this blog:

https://www.youtube.com/watch?v=lmp0mkOb6bo&t=13s

Follow us for more such content:

https://www.linkedin.com/company/hasabtech

https://www.youtube.com/@hasabTech

https://www.instagram.com/hasab.tech/

https://www.facebook.com/hasabTech