Web resource caching: Server-side

Read Time:3 Minute, 15 Second

The subject of Web resource caching is as old as the World Wide Web itself. However, I’d like to offer an as-exhaustive-as-possible catalog of how one can improve performance by caching. Web resource caching can happen in two different places: client-side – on the browser and server side. In the previous post, I explained the former; this post focuses on the latter.

While client-side caching works well, it has one central issue: to serve the resource locally, it must first have it in the cache. Thus, each client needs its cached resource. If the requested resource is intensive to compute, it doesn’t scale. The idea behind server-side caching is to compute the resource once and serve it from the cache to all clients.

Web resource caching: Server-side

A couple of dedicated server-side resource caching solutions have emerged over the years: Memcached, Varnish, Squid, etc. Other solutions are less focused on web resource caching and more generic, e.g., Redis or Hazelcast.

If you want to dive deeper into generic caching solutions, please check these two posts on the subject.

To continue with the sample from last week, I’ll use Apache APISIX to demo server-side caching. APISIX relies on the proxy-cache plugin for caching. Unfortunately, at the moment, APISIX doesn’t integrate with any third-party caching solution. It offers two options: memory-based and disk-based.

In general, the former is faster, but memory is expensive, while the latter is slower, but disk storage is cheap. Within OpenResty, however, the disk option may be faster because of how LuaJIT handles memory. You should probably start with the disk, and if it’s not fast enough, mount /dev/shm.

Here are my new routes:

Enter fullscreen mode Exit fullscreen mode

Note that the default cache key is the host and the request URI, which includes query parameters.

The default proxy-cache configuration uses the default disk-based configuration:

Enter fullscreen mode Exit fullscreen mode

We can test the setup with curl:

Enter fullscreen mode Exit fullscreen mode

The response is interesting:

Enter fullscreen mode Exit fullscreen mode
  1. Because the cache is empty, APISIX has a cache miss. Hence, the response is from the upstream

If we curl again before the default cache expiration period (300 seconds), the response is from the cache:

Enter fullscreen mode Exit fullscreen mode

After the expiration period, the response is from the upstream, but the header is explicit:

Enter fullscreen mode Exit fullscreen mode

Note that we can explicitly purge the entire cache by using the custom PURGE HTTP method:

Enter fullscreen mode Exit fullscreen mode

After purging the cache, the above cycle starts anew.

Note that it’s also possible to bypass the cache, e.g., for testing purposes. We can configure the plugin accordingly:

Enter fullscreen mode Exit fullscreen mode
  1. Bypass the cache if you send a bypass query parameter with a non-0 value

Enter fullscreen mode Exit fullscreen mode

It serves the resource from the upstream regardless of the cache status:

Enter fullscreen mode Exit fullscreen mode

For more details on all available configuration parameters, check the proxy-cache plugin.

Conclusion

This post was relatively straightforward. The most challenging issue with server-side caching is the configuration: what to cache, for how long, etc. Unfortunately, it depends significantly on your context, problems, and available resources. You probably need to apply PDCA: guesstimate a relevant configuration, apply it, measure the performance, and rinse and repeat until you find your sweet spot.

I hope that with an understanding of both client-side and server-side caching, you’ll be able to improve the performance of your applications.

The source code is available on GitHub:

To go further:

Originally published at A Java Geek on December 4th, 2022

Source: https://dev.to/apisix/web-resource-caching-server-side-4hm2

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
How I Built a Vue.js Ecommerce Store with a Node.js Backend Previous post How I Built a Vue.js Ecommerce Store with a Node.js Backend
Working with data attributes in CSS Next post Working with data attributes in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.