Middleware execution flow (req, res, next) in Express - Performance & Optimization

Performance: Middleware execution flow (req, res, next)

MEDIUM IMPACT

This affects server response time and how quickly the client receives the final page or data.

Handling multiple middleware functions in an Express app

Express

app.use(async (req, res, next) => {
  await someAsyncTask();
  next();
});
app.use((req, res) => {
  res.send('Done');
});

Using asynchronous code prevents blocking, allowing other requests to be handled concurrently.

📈 Performance GainNon-blocking middleware improves server throughput and reduces response delay

Handling multiple middleware functions in an Express app

Express

app.use((req, res, next) => {
  // heavy synchronous task
  for(let i = 0; i < 1e8; i++) {}
  next();
});
app.use((req, res) => {
  res.send('Done');
});

Blocking synchronous code in middleware delays the entire request processing and response.

📉 Performance CostBlocks event loop, increasing server response time by hundreds of milliseconds

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking synchronous middleware	0 (server-side)	0 (server-side)	0 (client-side)	[X] Bad
Asynchronous non-blocking middleware	0 (server-side)	0 (server-side)	0 (client-side)	[OK] Good

Rendering Pipeline

Middleware functions process the request and response objects sequentially on the server before sending the final response to the browser.

→Request Handling

→Response Preparation

→Network Transfer

⚠️ BottleneckBlocking or slow middleware delays the entire response, increasing LCP on the client.

Core Web Vital Affected

LCP

This affects server response time and how quickly the client receives the final page or data.

Optimization Tips

1Avoid heavy synchronous tasks inside middleware to prevent blocking.

2Always call next() once middleware work is done to continue the flow.

3Use asynchronous operations in middleware to keep the server responsive.

Performance Quiz - 3 Questions

What happens if middleware contains heavy synchronous code?

A It speeds up response time by running faster.

B It blocks the event loop and delays all requests.

C It only affects the current request without blocking others.

D It improves browser rendering performance.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and check the Time column for server response delay.

What to look for: Look for long waiting (TTFB) times indicating slow server middleware processing.

Practice

1. What does the next() function do in Express middleware?

easy

A. It passes control to the next middleware or route handler.

B. It sends the response back to the client immediately.

C. It stops the middleware chain and ends the request.

D. It modifies the request object permanently.

Solution

1. Step 1: Understand middleware flow

   Middleware functions receive req, res, and next. Calling next() tells Express to continue to the next middleware or route.

2. Step 2: Identify the role of next()

   Calling next() does not send a response or stop the chain; it moves control forward.

3. Final Answer:

   It passes control to the next middleware or route handler. -> Option A

4. Quick Check:

   next() = pass control [OK]

Hint: Remember: next() moves to the next step in middleware [OK]

Common Mistakes:

• Thinking next() sends a response
• Assuming next() stops middleware chain
• Confusing next() with modifying req or res

2. Which of the following is the correct way to define middleware in Express?

easy

A. app.use((req, res, next) => { next(); });

B. app.use((req, res) => { next(); });

C. app.use((req, res, next) => { res.next(); });

D. app.use((req, res, next) => { next; });

Solution

1. Step 1: Check middleware function signature

   Express middleware must have three parameters: req, res, and next.

2. Step 2: Verify correct usage of next()

   Calling next() as a function is required to pass control. app.use((req, res, next) => { next(); }); correctly uses next() with all parameters.

3. Final Answer:

   app.use((req, res, next) => { next(); }); -> Option A

4. Quick Check:

   Middleware signature + next() call = app.use((req, res, next) => { next(); }); [OK]

Hint: Middleware needs (req, res, next) and call next() as a function [OK]

Common Mistakes:

• Omitting the next parameter
• Calling next without parentheses
• Using res.next() which does not exist

3. Consider this Express middleware chain:

app.use((req, res, next) => { console.log('A'); next(); });
app.use((req, res, next) => { console.log('B'); next(); });
app.use((req, res) => { res.send('Done'); });

What will be printed in the console when a request is made?

medium

A. A

B. A B

C. B A

D. No output

Solution

1. Step 1: Trace middleware execution order

   The first middleware logs 'A' and calls next(), so control moves to the second middleware.

2. Step 2: Continue to second middleware

   The second middleware logs 'B' and calls next(), moving to the third middleware which sends the response.

3. Final Answer:

   A B -> Option B

4. Quick Check:

   Middleware logs in order = A B [OK]

Hint: Middleware runs in order; next() moves forward [OK]

Common Mistakes:

• Assuming logs appear after response
• Thinking next() skips middleware
• Confusing order of middleware calls

4. What is the problem with this middleware code?

app.use((req, res, next) => {
  console.log('Start');
  // missing next() call
});
app.use((req, res) => {
  res.send('Hello');
});

medium

A. The second middleware is missing next parameter.

B. console.log() causes an error in middleware.

C. res.send() cannot be called in middleware.

D. The first middleware never calls next(), so request hangs.

Solution

1. Step 1: Check middleware flow control

   The first middleware logs 'Start' but does not call next() or send a response, so Express waits indefinitely.

2. Step 2: Understand consequence of missing next()

   Without calling next(), the second middleware never runs, and the client gets no response.

3. Final Answer:

   The first middleware never calls next(), so request hangs. -> Option D

4. Quick Check:

   Missing next() causes hang [OK]

Hint: Always call next() or send response to avoid hanging [OK]

Common Mistakes:

• Ignoring missing next() causes no response
• Thinking console.log() breaks middleware
• Assuming res.send() is invalid in middleware

5. You want to create middleware that logs request method and URL, then passes control only if the method is GET. Otherwise, it should send a 405 status. Which code correctly implements this?

hard

A. app.use((req, res, next) => {
console.log(req.method, req.url);
next();
res.status(405).send('Method Not Allowed');
});

B. app.use((req, res, next) => {
console.log(req.method, req.url);
if (req.method === 'GET') res.send('OK');
else next();
});

C. app.use((req, res, next) => {
console.log(req.method, req.url);
if (req.method === 'GET') next();
else res.status(405).send('Method Not Allowed');
});

D. app.use((req, res) => {
console.log(req.method, req.url);
if (req.method !== 'GET') next();
else res.status(405).send('Method Not Allowed');
});

Solution

1. Step 1: Log method and URL

   The middleware logs req.method and req.url correctly in all options.

2. Step 2: Control flow based on method

   app.use((req, res, next) => { console.log(req.method, req.url); if (req.method === 'GET') next(); else res.status(405).send('Method Not Allowed'); }); calls next() only if method is GET, else sends 405 status. This matches the requirement.

3. Step 3: Identify incorrect options

   app.use((req, res, next) => { console.log(req.method, req.url); if (req.method === 'GET') res.send('OK'); else next(); }); sends 'OK' on GET instead of passing control. app.use((req, res, next) => { console.log(req.method, req.url); next(); res.status(405).send('Method Not Allowed'); }); calls next() then tries to send response (invalid). app.use((req, res) => { console.log(req.method, req.url); if (req.method !== 'GET') next(); else res.status(405).send('Method Not Allowed'); }); lacks next parameter and reverses logic.

4. Final Answer:

   app.use((req, res, next) => { console.log(req.method, req.url); if (req.method === 'GET') next(); else res.status(405).send('Method Not Allowed'); }); -> Option C

5. Quick Check:

   next() only on GET, else 405 = app.use((req, res, next) => { console.log(req.method, req.url); if (req.method === 'GET') next(); else res.status(405).send('Method Not Allowed'); }); [OK]

Hint: Call next() only for GET; send 405 otherwise [OK]

Common Mistakes:

• Calling next() then sending response
• Swapping condition logic
• Missing next parameter in middleware