Multi-level caching in Web

Describe the pattern you'd like to propose I didn't find anything related to caching in the current catalog though I believe it may help reduce a huge amount of computations (and eventually carbon emissions). Sure I understand that we just exchange CPU utilization for the memory, but I think using it wisely we can do it with a very profitable exchange rate.

I think we can describe it through the perspective of multi-level usage:

[Development, Frontend] Cache API requested data in local variables/ session and local storage.
[Development, Frontend] Cache rendered components and prevent re-rendering. E.g. with React.memo() and useMemo for React.
[Development] Cache reusable heavy JS calculations in local variables.
[Development] Use build tools with developed caching (e.g. NX)
[Development] Design your Dockerfile instructions according to the best practices to cache as much as possible.
[Development, Backend] Use in-memory storage tools to cache some traffic (e.g. Redis, Memcached etc)
[Development, Backend] Cache database queries
[Browsing] Use modern web browsers with developed caching mechanisms and update them timely.

It's just a short list of practices that can help to avoid some extra computations. List may be much longer and more detailed.

Describe specific emission impact from this pattern It very much depends on what exactly is cached and how much calculations avoided.

Once we take as example that certain GET request was cached with e.g. session storage, we may avoid the work on the network, some microservices on the server side, query to the database (maybe even few queries) and way back to the client. Hard to get exact numbers, but profit seems obvious.

References to this pattern There is a reference to browser page caching in the server-rendering pattern

Green-Software-Foundation / patterns

Multi-level caching in Web #296