How To Get And Process A Stream Response With Axios in NextJS ?

Last Updated : 30 Jun, 2024

When building web applications with Next.js, you often encounter scenarios where you need to fetch and process streaming data.

Whether it's downloading large files, real-time data feeds, or multimedia content, efficiently handling stream responses is crucial for performance and user experience.

We'll explore how to utilize Axios, a popular HTTP client, to fetch and process stream responses in Next.js.

Steps to Process A Stream Response With Axios

Installing Axios

If you haven't installed Axios in your Next.js project yet, you can do so by running the following command in your terminal:

npm install axios

Fetching a Stream Response

To fetch a stream response using Axios in Next.js, you need to set the responseType option to 'stream' when making the request. This tells Axios to treat the response as a stream of data rather than a JSON object or a string.

Here's an example of how to fetch a stream response:

const response = await axios.get('your_stream_url_here', {
      responseType: 'stream'
});

Replace 'your_stream_url_here' with the actual URL of the stream you want to fetch.

Processing the Stream Response

Once you've fetched the stream response, you can process it according to your requirements. There are several ways to handle a stream response:

Piping to a Writable Stream: You can pipe the stream response directly to a writable stream, such as a file stream, using Node.js's fs module.

JavaScript

import axios from 'axios';
import fs from 'fs';

const fetchData = async () => {
  try {
    const response = await axios.get('your_stream_url_here', {
      responseType: 'stream'
    });
    
    const fileStream = fs.createWriteStream('output_file.txt');
    response.data.pipe(fileStream);
    
    fileStream.on('finish', () => {
      console.log('File write operation is completed.');
    });
    
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

Reading the Stream: Alternatively, you can read the stream response directly and process it in memory. This approach is suitable for scenarios where you need to manipulate the data before saving it to a file or displaying it to the user.

JavaScript

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('your_stream_url_here', {
      responseType: 'stream'
    });
    
    // Read the stream response
    let data = '';
    response.data.on('data', (chunk) => {
      data += chunk;
    });
    
    response.data.on('end', () => {
      // Process the complete data
      console.log('Stream data:', data);
    });
    
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

We've explored how to fetch and process stream responses using Axios in Next.js. By setting the responseType option to 'stream', you can seamlessly handle streaming data in your Next.js applications.

Whether you're downloading files, consuming real-time data feeds, or streaming multimedia content, mastering stream response handling is essential for building robust and efficient web applications.

Steps for creating NextJS App

Step 1: Create a new next project using Create next App or any other method you prefer.

npx create-next-app@latest my-app

Step 2: Install required packages using npm or yarn.

npm install axios fs

When we open our project in a code editor, we see a straightforward project structure. For the scope of this tutorial, We’ll first cleanup the few files.

Project Structure

The Updated dependencies in your package.json file is look like:

"dependencies": {
    "axios": "^1.7.2",
    "fs": "^0.0.1-security",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
},

Example:

JavaScript

// file: layout.js

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

JavaScript

// file:page.js

import axios from "axios";
import fs from "fs";
export default function Home() {
  async function fetchData() {
    try {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/users",{
          responseType: "stream", // Specify responseType as 'stream'
        }
      );

      const fileStream = fs.createWriteStream("output_file.txt");
      response.data.pipe(fileStream);

      fileStream.on("finish", () => {
        console.log("File download completed");
      });
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }
  fetchData();

  return (
    <div>
      <h1>Fetching Stream Data Example</h1>
    </div>
  );
}

Output: here is the content of output_file.txt as an output form of our application.