Do we need caching in AngularJS

Angular JS

Do we need caching in Angular JS ? Caching in a Web based application can dramatically improve the performance and application loading. But it also hard to to invalidation. With Ajax application like AngularJS, I thinking about do we need cache the ajax response from REST api backend.

After some reading and search about web caching, from Web Caching for the credits, I conclude that no need to do the cache in tha application logic. Why ? Because HTTP1.1 have caching method and cache invalidation, and every modern web browser comply to it. The only problem need to tackle is the REST server configuration to make the REST api cache friendly.

Base on HTTP1.1 draft , cache described as  A program's local store of response messages and the subsystem that controls its message storage, retrieval, and deletion. A cache stores cacheable responses in order to reduce the response time and network bandwidth consumption on future, equivalent requests. Any client or server may include a cache, though a cache cannot be used by a server that is acting as a tunnel.
Most developer want to use cache in the application logic is to improve the performance and spare the database server work, and also to save bandwidth use to request the data. Of course my aim to use Cache is to make performance improvement in the application loading and ease the server burden to process the same data again and again.

I test my AngularJS SPA web application which fully ajax, and request all data come from a backend API via REST service. The result is when the user first load the data, the request is served from the REST services. And after the second request, it served from the local client cache of the web browser. This of course satisfy the need to make application load faster and ease the server workload.

But, the web browser still need to make a connection to the REST api server to check the validity of the cache, and do some invalidation if needed. But no data transfer taken place, the response just 304 Not Modified , which means the data not changed and you can serve it from your local cache. This is valid for proxy server cache and other cache machine out there which comply with HTTP1.1 specification.

And for the invalidation, when I do POST method to the url, the GET method will be refreshed by the cache, so invalidation is done without single line of code. This is also work with DELETE and PUT method, as long as using the same URL resource , like http://www.myserver.com/api/article and use different method on it.The cache of a resource will be invalidated if there are POST method action to the same resource. This why also we need to follow RESTFULL standart for cache friendly API.

And the time needed to check the cache validity to server only takes about 50ms or more depend on your server. This is just a great way to leverage the cache infrastructure already deployed out there in the internet, especially the Web Browser technology. No need to add cache logic in your app and got mess with cache invalidation. Just let the browser and cache machine out there to handle the cache, as long as your server is cache friendly.

This is not the same with standart web application which reload every time user request a page, because the server need to generate the content again, like get from database, process the template and others job before request sent to web browser.

But doing caching inside an application is a not easy task. I have been there with PHP, and Django especially using Memcache. It is fast, but need to maintain the cache state.

So I will not to use caching in the angularJS code, just let the HTTP1.1 caching mechanism do it. I have try the $cacheFactory method, and can do the cache and not to check the API server for the validation, but the invalidation is just a more coding works. Maybe for other purpose will use these cache method.

Happy Coding.

Posted in: AngularJS