The Basics of Rate Limiting: How It Works and How to Use It

Rate limiting is a vital concept in web development. It ensures server stability, efficient resource allocation, and protection against malicious attacks. So In this article, we’ll delve into the essence of rate limiting, its importance, various implementation methods, and practical examples to demonstrate its functionality. let’s dive right in 😉

What is Rate Limiting?

Rate limiting is a strategy that is used to control the amount of incoming requests or traffic to a web service or to a server. it helps protect your applications from abuse, ensures fair resource distribution, and maintains service stability.

Why Use Rate Limiting?

Here are some of the reasons why you should use rate limiting 👇🏽

• Preventing Abuse: Stops bots or malicious users from overwhelming the server with requests.
• Resource Management: Ensures fair usage of resources across all users.
• Security: Helps prevent brute-force attacks by limiting attempts of some endpoints in your application.
• Cost Control: Helps prevent unexpected charges due to excessive API calls.
• Performance: Keeps your server responsive and reduces the risk of downtimes.

Types of Rate Limiting

1. Fixed Window (or Simple) Rate Limiting: This method limits requests within a fixed time window. For example, "100 requests per minute.""
2. Sliding Window Rate Limiting: A dynamic time frame that tracks and limits requests over a recent period, such as the last few minutes or seconds.
3. Token Bucket Algorithm: This method uses a "bucket" filled with tokens to manage requests. Each incoming request consumes a token, and the bucket is refilled at set intervals. This approach allows for bursts of traffic while maintaining an overall rate limit.
4. Leaky Bucket Algorithm: Similar to the token bucket, but with a twist. When the bucket is full, excess requests "leak" out or are discarded, maintaining a steady flow.

💡 I'm not even going to lie because I don't know much about the Token Bucket and Leaky Bucket algorithms, as I haven't needed them for my current projects. However, Fixed Window and Sliding Window are the most common types you'll encounter. For instance, OpenAI's GPT-4 uses Fixed Window rate limiting with tiered limits—their first tier allows 500 requests per minute This approach can lead to burst traffic, as users might hit their limit just before the window resets.

How Rate Limiting Works

The process typically involves:

1. Tracking: Monitoring how many requests a user (mostly the userId) or IP has made within a specific timeframe.
2. Threshold: Defining a limit (e.g., 100 requests per hour).
3. Response: Sending a warning or blocking further requests when the limit is exceeded (usually with a 429 Too Many Requests HTTP status code).

Implementing Rate Limiting: Practical Examples

Now that you have a basic understanding of rate limiting and how it works, let's get our hands dirty by implementing it in a project we'll be creating.

We'll create two projects demonstrating rate limiting:

1. A GET request example
2. A POST request example

Tech Stack

• Frontend: React (using Vite)
• Backend: Express (Node.js framework)

GET request example

Create a folder with any name of your choice and open it on VS code or whatever code editor you use.

Inside that folder you've created, create two more folders called frontend and backend.

After that, cd into the backend folders and enter this command npm init -y to initialize a package.json file

After that install the follow npm packages inside the backend folder 👇🏽

npm install express cors express-rate-limit

npm install -D nodemon

What these do:

• express: Creates your web server and handles API routes
• cors: Allows frontend to communicate with backend safely
• express-rate-limit: Protects your API from too many requests
• nodemon: Auto-restarts server during development (that's why we use D)

After that, create an index.js (you can this whatever you want) file because we’ll be using it to set up the rate limiter.

After you’ve done copy and paste this code that I am going to explain in a bit

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

Here's what each part does:

1. First two lines import our needed packages
2. app = express() creates our server
3. The limiter is configured with:
   • windowMs: Sets a 15-minute time window (15 × 60 × 1000 milliseconds)
   • max: Allows 5 requests per IP address in that window
   • message: The error message users see when they exceed the limit

Then:

1. app.use(limiter) applies our rate limit to all routes
2. We create a simple test route at '/api/data' that sends a welcome message
3. Finally, we start the server on port 5000

When users hit your API more than 100 times in 15 minutes from the same IP, they'll get the error message instead of accessing the API.

Now that you know how it works, we want to enable auto-restart by adding to package.json 👇🏽

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

That’s all for the backend.

It’s time to set up the frontend.

• Open a new terminal and cd into the frontend folder and run 👇🏽

  npm create vite@latest .

• Go through the following instructions and I’ll advise you select JavaScript if you don’t know typescript
• You can do a little clean up by getting rid of some files you won’t need. here is how mine looks

• Once you are done, open the App.jsx and paste this code that I’ll explain 👇🏽

  import { useState } from "react";
  import axios from "axios";

  const App = () => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState(null);

    const fetchData = async () => {
      try {
        setError(null); // Reset error state before making a request
        const res = await axios.get("http://localhost:5000/api/data");
        setResponse(res.data.message);
      } catch (err) {
        setError(err.response?.data || "Error occurred while fetching data");
      }
    };

    return (
      <div className="App">
        <header className="App-header">
          <h1>Rate Limiting Test with Express</h1>
          <button onClick={fetchData}>Fetch Data from Server</button>
          {response && <p>Server Response: {response}</p>}
          {error && <p style={{ color: "red" }}>Error: {error}</p>}
        </header>
      </div>
    );
  };

  export default App;

Here's what's happening:

1. We import useState for managing data and axios for making API requests
2. We create two state variables:
   • response: Stores successful API responses
   • error: Stores any error messages
3. The fetchData function:
   • Gets called when button is clicked
   • Tries to fetch data from our API
   • Updates either response or error state
   • Uses try/catch to handle success and errors
4. The UI shows:
   • A title
   • A button to trigger requests
   • The API response (if successful)
   • Error messages in red (if request fails) When you click the button too many times within 15 minutes, you'll see the rate limit error message because of our backend restrictions!

That’s all about the GET request example. Let’s move on to the next example

POST request example

For this example, you can decide to comment out the code of the first example and paste this code 👇🏽

import express from "express";
import cors from "cors";
import rateLimit from "express-rate-limit";
import bodyParser from "body-parser";

const app = express();

app.use(cors());

app.use(bodyParser.json());

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // limit each IP to 100 requests per windowMs
  message: "Too many requests from this IP, please try again after 15 minutes",
});

app.post("/api/submit-form", limiter, (req, res) => {
  const { name, email, message } = req.body;

  // Simulate processing form data
  console.log(`Received form submission from ${name} (${email}): ${message}`);

  res.json({ message: "Form has been submitted successfully!" });
});

app.listen(5000, () => console.log(`Listening on port ${5000}`));

You can see that most of the code are the same with the first example but here are just some key difference 👇🏽

• Added bodyParser to handle form data
• Creates a POST endpoint that processes form submissions

Also paste this code on the frontend as well

import { useState } from "react";
import axios from "axios";

const App = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setError(null); // Reset error state before making a request
      const res = await axios.post(
        "http://localhost:5000/api/submit-form",
        formData,
      );
      setResponse(res.data.message);
    } catch (err) {
      setError(
        err.response?.data || "Error occurred while submitting the form",
      );
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Rate Limiting Form Submission with Express</h1>
        <form onSubmit={handleSubmit}>
          <div>
            <label>Name:</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Email:</label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Message:</label>
            <textarea
              name="message"
              value={formData.message}
              onChange={handleInputChange}
              required
            />
          </div>
          <button type="submit">Submit</button>
        </form>
        {response && (
          <p style={{ color: "green" }}>Server Response: {response}</p>
        )}
        {error && <p style={{ color: "red" }}>Error: {error}</p>}
      </header>
    </div>
  );
};

export default App;

Here, we're simply making a request to the server through a form. Let's look at how this differs from the GET example:

1. Uses a form instead of a single button
2. Manages form state with formData
3. Handles input changes with handleInputChange
4. Uses POST request instead of GET
5. Shows success message in green

The form allows 5 submissions in 15 minutes - after that, users see the rate limit error message.

Conclusion

Alright guys, congrats on getting to the end of this article 🎉. I hope you now have an idea on how rate limiting works and why you should use it on your projects especially if you are working on bigger projects that involves money. If you have any questions, feel free to ask in the comment. Happy coding 🤠