[英]How to invalidate browser cache in a web application built with angular7 and springboot
I'm developing a web application using springboot for the backend serving rest API and Angular7 for the frontend.我正在开发一个 web 应用程序,使用 springboot 为后端服务 rest API 和 Angular7 为前端。
my application takes so much time to load because it has to perform a lot of processing on the server, so I decided to improve the performance by storing the cached data in order to load the page first and eventually update the data when processing ends.我的应用程序需要很长时间才能加载,因为它必须在服务器上执行大量处理,所以我决定通过存储缓存数据来提高性能,以便首先加载页面并最终在处理结束时更新数据。
This works but I'm having a problem: When I update data in Angular these are normally saved in my database but if I update the page I don't see the changes because the browser continues to access the old cached data rather than getting the new ones modified.这可行,但我遇到了一个问题:当我在 Angular 中更新数据时,这些数据通常保存在我的数据库中,但如果我更新页面,我看不到更改,因为浏览器继续访问旧的缓存数据而不是获取新的修改。
Is there a way to invalidate certain data in the browser cache when they are modified?有没有办法在修改浏览器缓存中的某些数据时使其无效?
Springboot:弹簧靴:
My rest controller endpoint are similar to that:我的休息控制器端点类似于:
@GetMapping(value = "/users")
public Iterable<User> getAllUsers(HttpServletResponse response) {
response.setHeader("Cache-Control", "max-age=3600");
return this.userService.findAll());
}
My service:我的服务:
@Cacheable("users")
public Iterable<User> findAll() {
return this.userRepository.findAll();
}
My angular service:我的角度服务:
getUsers(): Observable<User[]> {
return this.http.get<User[]>(`<ip>' + '/users');
}
I can see you're caching on the server side, you can evict cache by calling method annotated with @CacheEvict
with the key you want to evict:我可以看到您正在服务器端进行缓存,您可以通过调用带有@CacheEvict
注释的方法以及您要驱逐的密钥来驱逐缓存:
@CacheEvict(value = "users", allEntries = true)
Or you can do this programmatically by using CacheManager
:或者您可以使用CacheManager
以编程方式执行此操作:
@Autowired
CacheManager cacheManager;
public void evictSingleCacheValue(String cacheName, String cacheKey) {
cacheManager.getCache(cacheName).evict(cacheKey);
}
You can check if there is any changes in your server side Time-based or Content-based controls by lightweight requests.您可以通过轻量级请求检查服务器端基于时间或基于内容的控件是否有任何更改。
Time-based => your can use Last=Modified in the header基于时间 => 您可以在标题中使用 Last=Modified
Content-based => you can use Etag基于内容 => 你可以使用 Etag
please check these two links;请检查这两个链接; https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers
https://www.logicbig.com/quick-info/web/last-modified-and-if-modified-since.html https://www.logicbig.com/quick-info/web/last-modified-and-if-modified-since.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.