Part 53: Optimizing API Requests in a Next.js Application with Strapi

[App] Headless CMS

[App] Headless CMS

In a modern web application, efficiency is key—both in terms of data retrieval and user experience. While integrating Strapi with Next.js, you might find yourself fetching more data than necessary. This blog post will guide you through optimizing your API requests to only retrieve the fields you need, making your application faster and more efficient.

The Problem: Fetching Unnecessary Data

When we first set up our API requests to Strapi, we fetched all available data, including different image formats and fields we didn't need. This approach can slow down your application and increase bandwidth usage. Thankfully, Strapi offers a solution called "Field Selection" to address this issue.

Field Selection in Strapi

Understanding Field Selection

Field selection allows you to specify exactly which fields you want to retrieve from the API. This is achieved by passing specific query parameters when making a request. By doing so, you reduce the amount of data transferred, resulting in faster response times.

Installing the qs Library

To encode our query parameters efficiently, we'll use the qs library, which simplifies the process of converting arrays and objects into URL query strings.

1. Install the qs Library: Open your terminal and run:

   npm install qs

Using the qs Library in Your Code

Let's update our script to use the qs library for field selection.

1. Import qs in Your Script:

   import { writeFileSync } from 'node:fs';
   import qs from 'qs';

2. Modify the API Request URL:

   Instead of fetching all fields, specify only the ones you need:

   const url = 'http://localhost:1337/api/reviews?' + qs.stringify({
     fields: ['slug', 'title', 'subtitle', 'publishedAt'],
     populate: { image: { fields: ['url'] } },
     sort: ['publishedAt:desc'],
     pagination: { pageSize: 6 },
   }, { encodeValuesOnly: true });

   Here’s what these parameters do:

   • fields: Specifies which fields to retrieve (e.g., slug, title, subtitle, publishedAt).

   • populate: For nested or related fields, like retrieving only the url from an image object.

   • sort: Sorts the reviews by publishedAt in descending order.

   • pagination: Limits the number of reviews to 6 per request.

3. Test the Changes:

   Run your script to ensure that only the specified fields are returned:

   node scripts/strapi-request.mjs

   Check the output to confirm that the response data only includes the specified fields.

Optimizing Pagination and Sorting

In addition to field selection, you can further optimize your API requests by explicitly setting pagination and sorting:

• Pagination: Use the pagination parameter to set a pageSize. This controls how many entries are returned in a single request.

• Sorting: Use the sort parameter to organize your data by specific fields, such as sorting reviews by the most recent publish date.

Conclusion

By using Strapi's field selection feature and the qs library, you can significantly optimize your API requests, reducing data transfer and improving the performance of your Next.js application. These optimizations not only make your application more efficient but also enhance the overall user experience by delivering content faster.

In our next steps, we'll integrate these optimized API requests into our main Next.js application, ensuring that our ReviewsPage displays data efficiently and effectively. Stay tuned for more on how to implement these changes in your existing codebase.