SharePoint  

Enhancing SharePoint Performance Using PnPjs Caching

PnPjs is a robust JavaScript library that streamlines interaction with SharePoint REST APIs. It simplifies data handling and supports caching to minimize redundant API calls, thereby enhancing performance.

What is Caching?

SP-PnP (SharePoint Patterns and Practices) caching is a performance optimization technique that temporarily stores SharePoint API responses in the browser’s memory or storage. By retrieving data from the local cache instead of making repeated network calls, SP-PnP significantly improves application speed and enhances the user experience.

When using caching in SP-PnP, unique cache keys are automatically generated based on the Request URL, query parameters, filter conditions, and selected fields. This ensures that different requests do not interfere with each other by maintaining distinct cache entries.

How SP-PnP Caching Works?

  1. First Request: The application requests data from SharePoint.

  2. API Call: SP-PnP makes a network call to the SharePoint server.

  3. Cache Storage: The response is stored locally with a unique cache key and an expiration time.

  4. Return Data: Fresh data is returned to the application.

Subsequent Requests

  • Cache Check: When the application requests the same data again, SP-PnP checks if a valid cached version exists.

  • Return Cached Data: If the cached data is valid, it is returned instantly (without making a network call).

  • Refresh if Expired: If the cache has expired, SP-PnP makes a new API call, retrieves fresh data, and updates the cache.

Simple Example for Understanding

Here's a practical example demonstrating the difference between cached and non-cached requests. When the code is executed without caching, it takes more time to fetch data. In contrast, using caching significantly reduces the response time, as data is retrieved from the local cache instead of making a network call.

Without Caching (Slow)

import { sp } from "@pnp/sp/presets/all";

// Every call makes a network request - SLOW!
async function loadDashboardSlow() {
  console.time("Without Caching");
  
  // Each of these makes a separate API call
  const lists = await sp.web.lists();           
  const currentUser = await sp.web.currentUser();  
  
  console.timeEnd("Without Caching");
  // Total: ~1200ms
  
  return { lists, currentUser };
}

With Caching (Fast)

import { sp } from "@pnp/sp/presets/all";

// First load caches data, subsequent loads are instant - FAST!
async function loadDashboardFast() {
  console.time("With Caching");
  
  // Cache for 10 minutes
  const cacheConfig = {
    expiration: new Date(Date.now() + (10 * 60 * 1000))
  };
  
  // First call: Makes API requests and caches responses
  // Subsequent calls: Returns cached data instantly
  const lists = await sp.web.lists.usingCaching({
    key: "site-lists",
    ...cacheConfig
  })();
  
  const currentUser = await sp.web.currentUser.usingCaching({
    key: "current-user", 
    ...cacheConfig
  })(); 
 

  console.timeEnd("With Caching");
  // First load: ~1200ms
  // Subsequent loads: ~10ms (120x faster!)
  
  return { lists, currentUser };
}

Best Practices for Using Caching

  • Clear the cache when data changes.

  • Consider cache size and memory usage.

  • Understand the type of data you are caching.

Conclusion

Caching is a highly effective way to enhance the performance and responsiveness of SharePoint applications. By leveraging PnPjs caching strategies—such as in-memory, local storage, or IndexedDB—you can minimize unnecessary network requests, improve load times, and reduce server load. Choosing the right caching approach based on your application's specific needs can lead to a smoother user experience and more efficient data handling.

Membership not found