Compression middleware in Node.js - Step-by-Step Execution

Concept Flow - Compression middleware

Request received

↓

Compression middleware runs

↓

Check if response is compressible

↓

Compress response

↓

Send compressed response

↓

Response sent to client

The middleware intercepts the response, checks if it can compress it, compresses if possible, then sends it to the client.

Execution Sample

Node.js

import express from 'express';
import compression from 'compression';

const app = express();
app.use(compression());
app.get('/', (req, res) => res.send('Hello World!'));

This code sets up an Express server that uses compression middleware to compress responses before sending.

Execution Table

Step	Action	Request Headers	Response Content	Compression Decision	Output Sent
1	Request received at '/' route	{Accept-Encoding: 'gzip, deflate'}	N/A	N/A	N/A
2	Compression middleware checks Accept-Encoding	{Accept-Encoding: 'gzip, deflate'}	Hello World!	Compress (gzip supported)	N/A
3	Response compressed using gzip	{Accept-Encoding: 'gzip, deflate'}	Compressed data	N/A	N/A
4	Compressed response sent with header Content-Encoding: gzip	{Accept-Encoding: 'gzip, deflate'}	Compressed data	N/A	Compressed response with Content-Encoding: gzip
5	Request ends	N/A	N/A	N/A	Response delivered compressed

💡 Response sent compressed because client supports gzip encoding.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
req.headers['accept-encoding']	undefined	'gzip, deflate'	'gzip, deflate'	'gzip, deflate'
res.body	undefined	'Hello World!'	Compressed data	Compressed data
res.headers['content-encoding']	undefined	undefined	'gzip'	'gzip'

Key Moments - 2 Insights

Why does the middleware check the 'Accept-Encoding' header?

Because it needs to know if the client can handle compressed responses. If the client doesn't support compression, the middleware skips compressing (see execution_table step 2).

What happens if the response content is already compressed or not suitable for compression?

The middleware will detect this and send the response as is without compressing, to avoid errors or inefficiency (not shown in this trace but implied in the 'No' branch in concept_flow).

Visual Quiz - 3 Questions

Look at the execution table at step 2. What compression method does the middleware decide to use?

A gzip

B deflate

C brotli

D none

💡 Hint

Check the 'Compression Decision' column at step 2 in the execution_table.

At which step is the 'Content-Encoding' header set to 'gzip'?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Output Sent' column where the header is mentioned.

If the client did not send 'Accept-Encoding' header, what would happen?

A Response would be compressed anyway

B Response would be sent uncompressed

C Server would throw an error

D Response would be delayed

💡 Hint

Refer to the concept_flow where the 'No' branch means no compression if client does not support it.

Concept Snapshot

Compression middleware in Node.js Express:
- Intercepts responses
- Checks 'Accept-Encoding' header
- Compresses response if client supports it (gzip, deflate, etc.)
- Adds 'Content-Encoding' header
- Sends compressed response to client
- Saves bandwidth and speeds up loading

Full Transcript

Compression middleware in Node.js works by intercepting outgoing responses from the server. When a client sends a request, the middleware checks the 'Accept-Encoding' header to see if the client can handle compressed data like gzip. If yes, it compresses the response body and adds a 'Content-Encoding' header to inform the client. Then it sends the compressed response. If the client does not support compression, the middleware sends the response as is. This process helps reduce the size of data sent over the network, making websites faster and saving bandwidth.

Practice

1. What is the main purpose of using compression middleware in a Node.js Express app?

easy

A. To parse JSON data from client requests

B. To add security headers to HTTP responses

C. To log all incoming requests to the server

D. To reduce the size of server responses and speed up loading times

Solution

1. Step 1: Understand what compression middleware does

   Compression middleware compresses the data sent from the server to the client to reduce its size.

2. Step 2: Identify the benefit of compression

   Smaller response sizes mean faster loading times for users because less data travels over the network.

3. Final Answer:

   To reduce the size of server responses and speed up loading times -> Option D

4. Quick Check:

   Compression = smaller responses = faster loading [OK]

Hint: Compression shrinks response size to speed up loading [OK]

Common Mistakes:

• Confusing compression with security or logging
• Thinking compression parses request data
• Assuming compression adds headers unrelated to size

2. Which of the following is the correct way to add compression middleware in an Express app?

easy

A. app.use('compression');

B. app.use(compression);

C. app.use(compression());

D. app.use(compress());

Solution

1. Step 1: Recall the syntax for middleware usage in Express

   Middleware functions are passed as functions, so you must call compression() to get the middleware function.

2. Step 2: Identify the correct syntax

   app.use(compression()); correctly calls the compression function and passes the middleware to Express.

3. Final Answer:

   app.use(compression()); -> Option C

4. Quick Check:

   Middleware needs function call syntax () [OK]

Hint: Middleware must be called as a function with () [OK]

Common Mistakes:

• Forgetting parentheses after compression
• Passing string instead of function
• Using wrong function name like compress

3. Given this Express code snippet, what will be the effect on the response?

import express from 'express';
import compression from 'compression';

const app = express();
app.use(compression());

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

medium

A. The response will be compressed if the client supports it

B. The response will always be sent uncompressed

C. The server will throw an error because compression is not configured

D. The response will be compressed only for POST requests

Solution

1. Step 1: Understand compression middleware behavior

   Compression middleware compresses responses only if the client sends an Accept-Encoding header that supports compression (like gzip).

2. Step 2: Analyze the code snippet

   The middleware is applied globally with app.use(compression()), so all responses, including GET '/', will be compressed if the client supports it.

3. Final Answer:

   The response will be compressed if the client supports it -> Option A

4. Quick Check:

   Compression depends on client support [OK]

Hint: Compression works only if client accepts it [OK]

Common Mistakes:

• Assuming compression always compresses regardless of client
• Thinking compression only works on POST
• Believing compression requires extra config to avoid errors

4. What is wrong with this code snippet that tries to add compression middleware?

const express = require('express');
const compression = require('compression');

const app = express();
app.use(compression);

app.get('/', (req, res) => {
  res.send('Hello');
});

app.listen(3000);

medium

A. The route handler is missing a next() call

B. Compression middleware is not called as a function

C. Express app is not created correctly

D. Compression middleware must be added after routes

Solution

1. Step 1: Check how compression middleware is added

   The code uses app.use(compression); which passes the compression function itself, not the middleware returned by calling it.

2. Step 2: Identify correct usage

   Compression middleware must be called as compression() to return the middleware function, so it should be app.use(compression());.

3. Final Answer:

   Compression middleware is not called as a function -> Option B

4. Quick Check:

   Middleware must be called with () [OK]

Hint: Always call middleware functions with () when adding [OK]

Common Mistakes:

• Passing middleware function without calling it
• Thinking middleware order doesn't matter here
• Confusing route handler requirements with middleware

5. You want to compress only responses larger than 1KB in your Express app. Which code snippet correctly applies this condition using compression middleware?

hard

A. app.use(compression({ threshold: 1024 }));

B. app.use(compression({ minSize: 1024 }));

C. app.use(compression({ sizeLimit: 1024 }));

D. app.use(compression({ compressAbove: 1024 }));

Solution

1. Step 1: Recall compression middleware options

   The official compression middleware option to set minimum response size for compression is threshold, which accepts bytes.

2. Step 2: Match the correct option name and value

   Setting threshold: 1024 means compress responses only if size is greater than 1024 bytes (1KB).

3. Final Answer:

   app.use(compression({ threshold: 1024 })); -> Option A

4. Quick Check:

   Use threshold option to set minimum size [OK]

Hint: Use threshold option to set minimum compression size [OK]

Common Mistakes:

• Using incorrect option names like minSize or sizeLimit
• Not specifying size in bytes
• Assuming compression applies to all sizes by default