How to handle a large number of rows and high volumes of column data?

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version - 47.0.7727.56
• SPFx version - 1.21.1
• Node.js version - 22.14.0
• PnP JS - 4.17.0

Issue description

We have created a SharePoint site collection and a SharePoint list named “My List Data” that contains Title(Single Line Text), Description(Multi Line Text), and Company(Choice) fields as per our requirements.

We also developed an SPFx project for customization and implemented the following code to retrieve data from this SharePoint list.

import { spfi, SPFI, SPFx } from '@pnp/sp';
import '@pnp/sp/items';
import '@pnp/sp/lists';
import '@pnp/sp/webs';


const sp: SPFI = getSP();
const listData = await sp.web.lists.getByTitle("My List Data").items.select("").top(5000);
// Also, we have tried to select only the necessary columns
// const listData = await sp.web.lists.getByTitle("My List Data").items.select("Id,Title,Description,Company").top(5000);
console.log("listData:", listData);

Due to the large number of rows and the high volume of data in the Description(Multi-Line Text) field, it is impacting the overall performance. The Description column contains important data. So, we cannot exclude that column from the SharePoint list api call.

Could anyone suggest an efficient approach to handle a large number of rows and high volumes of column data?

Thanks in Advance.