To enhance the performance of frontend applications, it is crucial to leverage caching technologies. By utilizing caching, the number of times data needs to be retrieved from the server can be reduced when users access the application. This improves the application's loading speed and enhances usability.

In this article, we will explain the caching technologies available for frontend applications.

Types of Caching Strategies

In frontend application development, the following caching strategies can be considered:

• Browser Cache
• Server Cache
• CDN (Content Delivery Network)
• Web Storage
• IndexedDB
• Cache API/Cache Storage API
• In-Memory

Additionally, there is Application Cache, but it is a deprecated API (switching to Service Workers is recommended).

Browser Cache

The browser cache is a caching mechanism standard in many browsers. It uses HTTP cache headers to cache resources. Cached resources can be utilized when accessing the same URL, eliminating the need to send requests to the server again.

When accessing a resource (such as an image), the server responds with headers like the following:

Cache-Control: max-age=604800

In this case, the resource is stored in the browser cache for the specified period (one week here). Subsequent accesses to the same resource will use the cached data instead of sending a request to the server.

The cache size varies depending on the browser and storage, so the cache is not always guaranteed to be valid.

Cache-Control - HTTP | MDN

Server Cache

Server cache is a caching technique performed on the server side. Using server cache allows responses from the server to be cached and returned for subsequent requests.

A common method involves using Redis. By saving the response content with the URL as the key in Redis, data can be retrieved from Redis and returned when a request comes to the web server (like nginx).

Another method is to cache as files locally. This does not require coordination with the web server and can be implemented at the application level. It also allows caching at a granular level rather than URL-based caching.

CDN (Content Delivery Network)

A CDN is a content delivery service that uses caching and high-speed networks. By using a CDN, content can be delivered from the server closest to the user, reducing waiting time and improving loading speed.

CDNs also use caching, enabling quick responses to repeated accesses. Moreover, CDNs provide security measures to mitigate risks such as DDoS attacks. It is recommended to use CDNs for static content like images and videos.

Web Storage

Web Storage is a mechanism for storing data in the browser. There are two types of Web Storage:

• LocalStorage
• SessionStorage

The difference lies in the storage duration of the data. LocalStorage stores data persistently, while SessionStorage deletes data when the session ends. Both interfaces save data as key-value pairs, with both keys and values stored as strings. JSON, for instance, can be stored by converting it into a string.

Web Storage API - Web API | MDN

IndexedDB

IndexedDB is a database that operates in the browser. It stores key-value pairs, allowing fast searches by creating indexes. IndexedDB supports transactions to maintain data integrity and schema version management. Additionally, most operations are asynchronous, so database operations do not block the UI thread.

The difference from Web Storage is the ability to define schemas. IndexedDB can define object stores (similar to tables) and create indexes, enabling the storage of complex data structures and fast searches.

IndexedDB - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Cache API/Cache Storage API

The Cache API is an API for manipulating the browser cache. By using the Cache API, resources can be cached and retrieved. The Cache API is often used in combination with Service Workers.

The difference from browser cache is that the Cache API allows developers to control the cached content. While the browser cache uses HTTP cache headers to control server-cached resources, the Cache API lets developers cache arbitrary resources. Note that the Cache API does not automatically delete cached data, so a mechanism for cache deletion must also be implemented.

When combined with a Service Worker, the Cache API is called before executing a URL request. By returning content from the Cache API, offline usage of web applications becomes possible.

Cache - Web API | MDN

In-Memory

In-memory caching stores data in memory. For example, the GraphQL library Apollo Client includes caching capabilities. The popular REST API library axios can implement caching using axios-cache-adapter.

Using these can reduce network access and improve application performance.

Cache Considerations

When considering caching in frontend applications, the following points need attention:

1. What content to cache
2. Where to cache it
3. Cache expiration and deletion methods

Regarding "what content to cache," it can be classified into the following three categories:

• Static content
• Dynamic content (public)
• Dynamic content (private)

Static content can be effectively cached using browser cache controls or CDNs. Dynamic content is divided into public content, which is the same for everyone, and private content, which varies for each user (authentication state).

Public content benefits from server cache. It is generally not recommended to cache private content, but if necessary, Web Storage or IndexedDB can be considered.

The Cache API is particularly effective for offline web application usage, though it can also be used for performance improvement.

Cache Deletion and Updates

Cache deletion is always a challenge. Browser cache control sets expiration periods. However, other caching methods generally do not have expiration periods. SessionStorage deletes data at the end of a session, but LocalStorage and IndexedDB require manual deletion.

Be cautious not to cache private data, which could be visible if another user logs in. Also, the Cache API needs a mechanism to periodically delete caches, or the display may not be updated.

Key considerations include "deleting all data during logout" and "retrieving data again in the background while returning cached data" for the Cache API. While the Cache API is convenient for offline application use, deletion is difficult, requiring caution.

It is recommended to use Workbox developed by Google, which can set expiration dates for Cache API.

Conclusion

Caching is crucial for improving web application performance. Various caching technologies have unique features, and understanding these features allows the optimal use of caching technologies in appropriate scenarios. Additionally, ensure data consistency regarding cache deletion and updates.

Hexabase offers enterprise-level BaaS, strongly supporting web application development. Please consider utilizing our services.