Server-side caching and Client-side caching

Introduction

Have you ever noticed that a website loads faster when you browse any website several times? It is because of caching. Caching is most commonly used to optimize the load time of a webpage and the amount of memory it uses. Major websites like Facebook, Google, Instagram, and youtube use caching to deliver high speeds and optimum user experience.

What is caching?

Caching is a process or method of storing a copy of the continuously asked data in a temporary storage location or cache to be quickly accessed when needed.

A cache is a memory reserved for storing temporary files or data from apps, servers, websites, or browsers to help load faster when requested. It includes images, videos, animation, gifs, scripts, files, etc.

What Is Website Caching?

Website caching is the process of storing a copy of a webpage on either the server or the user’s browser. It is of the following types.

  • Server-side Caching
  • Client-side Caching
  • Remote caching

Server-Side Caching

Server-side caching temporarily stores web files and data on the origin server to reuse later.

When the user first requests for the webpage, the website goes under the normal process of retrieving data from the server and generates or constructs the webpage of the website. After the request has happened and the response has been sent back, the server copies the webpage and stores it as a cache.

Next time the user revisits the website, it loads the already saved or cached copy of the webpage, thus making it faster.

Source: Edgemesh

 

Note - This server cache is an intermediate between the browser and the origin server.

 

Here's a diagram illustration to see server-side catching in action.

Source: Edgemesh

Types of Server-side Caching

  • Object Caching - In Object Caching, we store database queries. As a result, it is easier to access the next time the request is made.

Source: Edgemesh

 

  • Opcode Caching - Opcode Caching is a performance booster for PHP that compiles human-readable PHP to bytecode understood by web servers.

Source: Edgemesh

 

  • CDN Caching - Content Delivery Network or CDN Caching is a group of servers around the globe to provide content delivery to website visitors.

Source: Edgemesh

Drawbacks of Server Side Caching

The main problem with server-side caching is latency. Latency may be defined as the total time for the data packet to travel from source to destination. High latency means a significant delay user's request and the server's response.

Another problem with server-side caching is that if the data changes on the webpage, the server has to reconstruct it from scratch.

Client-Side Caching

Client-side caching temporarily stores web files and data in the browser memory instead of keeping it in the server.

When a user visits a website, the webpage gets cached in the user's browser memory, which means a copy of the webpage is stored.

Source: medium

Types of Client-side Caching

In Client-side Caching, we try to cache enough information about a webpage without creating repetitive requests to the server. These are of the following types.

  • Browser Request Caching - Browser Request Caching is the most widely used and oldest form of caching. It is built into the HTTP protocol standard.
  • Javascript/AJAX Caching - The Javascript/AJAX caching modifies the websites to display changes made to dynamic content in real-time without refreshing the entire page.
  • HTML 5 Caching - In HTML Caching, we try to cache images and scripts and HTML content. Since HTML takes too long to load, it will delay other processes.

Drawbacks of Client-Side Caching

One of the drawbacks of client-side caching is that it is browser-specific, and if you use multiple browsers, there would be various cache files of the same webpage.

Another disadvantage of client-side caching is that it is more complex than server-side caching.

Remote Caching

Remote Caching is similar to Server Side Caching, but it can also run an application to serialize and deserialize the data. The difference is that you control the remote server, and someone else does not operate it.

Frequently Asked Questions

Q.1 What is Caching?

Caching is a process or method of storing a copy of the continuously asked data in a temporary storage location or cache to be quickly accessed when needed.
 

Q.2 What are the downsides of caching?

If there are some changes to the website, you won’t see them immediately since the copy of the last version is stored in the cache. The solution is to clear the cache and reload the website.
 

Q.3 What is the difference between Server-side caching & Client-side caching?

The main difference between Server-side Caching and Client-side Caching is the location of stored data. In Server-side Caching, the data is in the server for many users, while in Client-side Caching, the information is in the user’s local system.

Key Takeaways

In this article, we learn what server-side and client-side caching is and how it makes our websites load faster.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think