In modern front-end applications, performance is a key factor in user experience. An effective way to improve performance is to cache the results of service (HTTP request) functions, thereby reducing redundant network requests and calculations.

This article will explore the http-front-cache utility, which provides a simple and efficient method of front-end caching. By the way, it’s open source ?

What is http-front-cache?

http-front-cache is a utility for caching the results of service functions in the browser. However, it is important to use this utility with caution and adhere to certain restrictions:

1. The data to be cached should not be too large.
2. Data should not contain sensitive information.
3. Data should not change too frequently.
4. Service parameters should not change too frequently (if they change too frequently, the cache will not be used).

By default, http-front-cache provides two helper functions:

cacheFactory: An extensible cache factory function that accepts a provider (the location where the cache is saved) to cache data. This allows you to extend the caching mechanism and save the cache wherever needed, such as localStorage, sessionStorage, IndexedDB, cookie, memory, etc.

cacheOnSessionStorage: cacheOnSessionStorage is a cacheable, ready-to-use function that takes cacheFactory and defines sessionStorage as a provider. It is an example of the cacheFactory feature. cacheOnSessionStorage was created because sessionStorage is one of the most commonly used cached data providers on the front-end.

Installation

To get started with http-front-cache you can install it via npm:

npm i @openish-u/http-front-cache

How to use http-front-cache

You may have noticed that there are two ways to use http-front-cache:

1) Use cacheOnSessionStorage

import { cacheOnSessionStorage } from 'utility-http-front-cache';

type Params = string;
type Result = { data: string[] };

const fetchData: ServiceFunction = async (param: string) => {
  const response = await fetch(`https://dev.to/api/articles?${param}`);
  return response.json();
};

const cachedFetchData = cacheOnSessionStorage(fetchData, 5 * 60 * 1000); // 緩存 5 分鐘

// 使用
cachedFetchData('exampleParam').then((result) => {
  console.log(result); // result 是 fetchData 返回的數(shù)據(jù)
});

// 導(dǎo)出 cachedFetchData 并根據(jù)需要使用

In this example, we define a service function fetchData that gets data from the API. We then use cacheOnSessionStorage to cache the results of this function for 5 minutes. When cachedFetchData is called, it checks the cache before making a network request.

Like this article? If yes, don’t forget to like ?? and follow me to stay updated. I will continue to create more similar content

2) Use custom provider extensions http-front-cache

npm i @openish-u/http-front-cache

In this example, we define a custom provider using the getItem, setItem and removeItem methods. We then use cacheFactory to create a cache function that uses a custom provider. The data you need can also be cached. xP

Buy me a cup of coffee ?. Hope my help is helpful to you. ?

Conclusion

http-front-cache is a powerful utility that can help you improve the performance of your web applications by caching the results of service functions.

For more information and the latest updates, check out the full documentation on GitHub.

Check out my other articles

The above is the detailed content of Boost Your FrontEnd App Performance with http-front-cache. For more information, please follow other related articles on the PHP Chinese website!