how to cache data during the navigation in Adobe AEM Cloud Service

You can use guava cache. We use it to cache api responses. But you have to keep a mechanism to clear the cache. Because if api data gets updated you will be need to purge the cache.

On corresponding request we check if the data is in guava cache. If there we pull the data from cache and send response. Otherwise we call the api, cache the data and send response

We are using hook to clear the cache. We have a common servlet with jwt authentication. So when api data gets updated or we need to purge the cache then the servlet is called.
Follow the documentation here

https://www.baeldung.com/guava-cache
https://github.com/google/guava/wiki/CachesExplained

https://guava.dev/releases/21.0/api/docs/com/google/common/cache/Cache.html