Redirect responses in NestJS - Step-by-Step Execution

Concept Flow - Redirect responses

Client sends request

↓

Controller method called

↓

Decide to redirect

↓

Send redirect response with status and URL

↓

Client receives redirect

↓

Client requests new URL

The server receives a request, decides to redirect, sends a redirect response, and the client follows the new URL.

Execution Sample

NestJS

import { Controller, Get, Res } from '@nestjs/common';
import { Response } from 'express';

@Controller()
export class AppController {
  @Get('old')
  redirect(@Res() res: Response) {
    return res.redirect(301, '/new');
  }
}

This code redirects requests from '/old' to '/new' with a 301 status.

Execution Table

Step	Action	Input/Condition	Response Sent	Client Behavior
1	Client sends GET request to '/old'	Request URL: /old	No response yet	Waiting
2	NestJS calls AppController.redirect	Route matches '/old'	No response yet	Waiting
3	Controller calls res.redirect(301, '/new')	Redirect status 301, URL '/new'	HTTP 301 with Location: /new	Receives redirect
4	Client receives 301 redirect	Status 301, Location '/new'	No new response yet	Sends GET request to '/new'
5	Client requests '/new'	Request URL: /new	Depends on '/new' handler	Follows new URL
6	Process ends for this redirect	Redirect complete	Final response from '/new'	Displays new page

💡 Redirect response sent with status 301 and Location header; client follows new URL

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
res	Express Response object	Redirect response prepared with status 301 and Location '/new'	Redirect response sent	Response cycle complete

Key Moments - 3 Insights

Why does the client send a new request after receiving the redirect?

Because the server sends a 301 status with a Location header (see execution_table step 3), the client knows to request the new URL.

What happens if we don't use @Res() and just return a string?

NestJS treats it as a normal response and does not redirect. Using @Res() lets us control the response directly (see execution_table step 3).

Can we change the redirect status code?

Yes, the first argument to res.redirect() is the status code (e.g., 301 or 302), controlling how the client handles the redirect (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution_table, what response does the server send at step 3?

A HTTP 404 Not Found

B HTTP 200 with body 'Redirected'

C HTTP 301 with Location header '/new'

D No response sent yet

💡 Hint

Check the 'Response Sent' column at step 3 in execution_table

At which step does the client send the new request to '/new'?

A Step 5

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Client Behavior' column for when the client requests '/new'

If we change the status code in res.redirect(301, '/new') to 302, what changes in the execution?

A The client does not redirect

B The client receives a 302 redirect instead of 301

C The server sends a 404 error

D The redirect URL changes automatically

💡 Hint

Refer to the 'Action' and 'Response Sent' columns in execution_table step 3

Concept Snapshot

NestJS redirect responses:
- Use @Res() to access Express Response
- Call res.redirect(statusCode, url) to send redirect
- Client receives status and Location header
- Client follows new URL automatically
- Common status codes: 301 (permanent), 302 (temporary)

Full Transcript

In NestJS, redirect responses happen when the server tells the client to go to a different URL. The client sends a request, the controller method runs, and if a redirect is needed, it uses the Express Response object's redirect method with a status code and new URL. The server sends back a response with that status and a Location header. The client then automatically requests the new URL. This process involves the controller method calling res.redirect(301, '/new'), sending a 301 status code and Location header. The client receives this and sends a new request to '/new'. This is how redirect responses work step-by-step in NestJS.

Practice

1. What is the primary purpose of using res.redirect() in a NestJS controller?

easy

A. To send the user to a different URL automatically

B. To send JSON data as a response

C. To handle database queries

D. To log user requests

Solution

1. Step 1: Understand the function of res.redirect()

   This method is used to send an HTTP redirect response to the client, telling the browser to go to a different URL.

2. Step 2: Compare with other options

   Options A, B, and C describe other unrelated tasks like logging, sending JSON, or querying databases, which are not the purpose of res.redirect().

3. Final Answer:

   To send the user to a different URL automatically -> Option A

4. Quick Check:

   Redirect means sending user to another URL [OK]

Hint: Redirect means sending user to a new URL [OK]

Common Mistakes:

• Confusing redirect with sending JSON response
• Thinking redirect handles database operations
• Assuming redirect logs requests

2. Which of the following is the correct way to inject the response object to use res.redirect() in a NestJS controller method?

easy

A. Use @Body() decorator

B. Use @Req() decorator

C. Use @Res() decorator

D. Use @Param() decorator

Solution

1. Step 1: Identify the decorator for response object

   In NestJS, @Res() is used to inject the response object to access methods like redirect().

2. Step 2: Verify other decorators

   @Req() is for request, @Body() is for request body data, and @Param() is for route parameters, none provide the response object.

3. Final Answer:

   Use @Res() decorator -> Option C

4. Quick Check:

   Response object injection = @Res() [OK]

Hint: Use @Res() to get response object for redirect [OK]

Common Mistakes:

• Using @Req() instead of @Res() for response
• Confusing @Body() with response injection
• Using @Param() which is for route params

3. Consider this NestJS controller method:

async redirectToGoogle(@Res() res) {
  res.redirect('https://google.com');
}

What will happen when this method is called?

medium

A. The user will be redirected to 'https://google.com' with status 302

B. The user will receive a JSON response with the URL

C. The server will throw an error because status code is missing

D. Nothing happens because redirect needs a status code

Solution

1. Step 1: Understand default behavior of res.redirect()

   When called with only a URL, res.redirect() sends a 302 status code by default, redirecting the user to the given URL.

2. Step 2: Check if status code is mandatory

   Status code is optional; if omitted, 302 is used automatically, so no error occurs.

3. Final Answer:

   The user will be redirected to 'https://google.com' with status 302 -> Option A

4. Quick Check:

   Redirect URL alone defaults to 302 status [OK]

Hint: Redirect without status defaults to 302 [OK]

Common Mistakes:

• Thinking status code is required for redirect
• Expecting JSON response instead of redirect
• Assuming server error without status code

4. Identify the error in this NestJS controller method:

@Get('go')
async go(@Res() res) {
  res.redirect(301, 'https://example.com');
  return 'Redirecting';
}

medium

A. Status code 301 is invalid for redirect

B. Returning a string after res.redirect() causes an error

C. Missing await before res.redirect()

D. res.redirect() must be called without parameters

Solution

1. Step 1: Understand res.redirect() behavior

   Calling res.redirect() sends the response immediately. Returning a value after sending response causes NestJS to throw an error because response is already sent.

2. Step 2: Check other options

   Status code 301 is valid for permanent redirect, no await needed as redirect is synchronous, and redirect requires parameters.

3. Final Answer:

   Returning a string after res.redirect() causes an error -> Option B

4. Quick Check:

   Don't return after sending response [OK]

Hint: Don't return after res.redirect() sends response [OK]

Common Mistakes:

• Thinking 301 is invalid status code
• Adding await unnecessarily
• Calling redirect without parameters

5. You want to create a NestJS controller method that redirects users to different URLs based on a query parameter type. If type is 'admin', redirect to '/admin/dashboard' with status 302; if 'user', redirect to '/user/home' with status 301; otherwise, redirect to '/' with status 302. Which code snippet correctly implements this?

hard

A. async redirect(@Query('type') type: string, @Res() res) {
if (type === 'admin') {
return res.redirect('/admin/dashboard');
} else if (type === 'user') {
return res.redirect(301, '/user/home');
} else {
return res.redirect('/');
}
}

B. async redirect(@Query('type') type: string, @Res() res) {
if (type === 'admin') {
res.redirect(302, '/admin/dashboard');
} else if (type === 'user') {
res.redirect('/user/home');
} else {
res.redirect(302, '/');
}
return 'Redirected';
}

C. async redirect(@Query('type') type: string, @Res() res) {
if (type === 'admin') {
return res.redirect(302, '/admin/dashboard');
} else if (type === 'user') {
return res.redirect('/user/home');
} else {
return res.redirect(302, '/');
}
}

D. async redirect(@Query('type') type: string, @Res() res) {
if (type === 'admin') {
res.redirect('/admin/dashboard');
} else if (type === 'user') {
res.redirect(301, '/user/home');
} else {
res.redirect('/');
}
}

Solution

1. Step 1: Check correct usage of res.redirect()

   Calling res.redirect() with URL only defaults to 302 status. To specify status, pass it as first argument. The method sends response immediately, so no return is needed.

2. Step 2: Analyze each option

   async redirect(@Query('type') type: string, @Res() res) { if (type === 'admin') { return res.redirect('/admin/dashboard'); } else if (type === 'user') { return res.redirect(301, '/user/home'); } else { return res.redirect('/'); } } incorrectly uses return res.redirect(), which can cause errors. async redirect(@Query('type') type: string, @Res() res) { if (type === 'admin') { res.redirect(302, '/admin/dashboard'); } else if (type === 'user') { res.redirect('/user/home'); } else { res.redirect(302, '/'); } return 'Redirected'; } returns a string after redirect, causing errors. async redirect(@Query('type') type: string, @Res() res) { if (type === 'admin') { return res.redirect(302, '/admin/dashboard'); } else if (type === 'user') { return res.redirect('/user/home'); } else { return res.redirect(302, '/'); } } mixes return and missing status codes. async redirect(@Query('type') type: string, @Res() res) { if (type === 'admin') { res.redirect('/admin/dashboard'); } else if (type === 'user') { res.redirect(301, '/user/home'); } else { res.redirect('/'); } } calls res.redirect() properly without return and uses correct status codes.

3. Final Answer:

   The code that calls res.redirect() properly without return and with correct status codes -> Option D

4. Quick Check:

   Call res.redirect() without return, specify status if needed [OK]

Hint: Call res.redirect() without return; specify status as first argument [OK]

Common Mistakes:

• Returning after res.redirect() causing errors
• Not specifying status code correctly
• Returning strings after sending response