How to set up browser negotiation cache based on nginx

The difference between strong cache and negotiated cache

Strong cache: The browser directly accesses the browser cache without negotiating with the server

Negotiated cache: The browser will first Confirm the validity of the resource with the server before deciding whether to fetch the resource from the cache or re-obtain the resource

Negotiate the operating principle of the cache

Now there is a business scenario like this: The static resources on the back end will be updated from time to time, and because the browser uses strong caching by default, outdated resources will be fetched from the browser cache by default.

Now we hope that the browser will confirm with the backend whether the resource has been updated every time it obtains the resource. We need to set the browser to use negotiation cache

So how does the backend determine whether the resource has been updated? ? At this time, the etag and last-modified response headers will be used.

Every time a request for a static resource is received, the backend will put the last modified time (last-modified) of the resource and the etag calculated based on the resource content in the response header to the frontend.

After receiving the response, the front end caches these two items, and then puts the contents of these two items into the if-modified-since and if-none-match requests the next time it requests the same resource. Head.

After the server receives these two items, it will compare it with the etag and last-modified currently generated by the resource. If both are consistent, it means that the resource has not been updated, and the server will return a 304 empty response; otherwise, Indicates that the resource has been updated, and the server will return the complete resource content to

implementation

So how to implement such a complex process? It's actually very simple. Just use nginx as the server for static resources and add cache-control:no-cache to the response header.

Let’s implement it step by step

1. Use nginx as the server for static resources

In the configuration of nginx, the request for static resources is mapped to the disk of the resource On the path

http {
  server {
  listen 80;
  ...
  location /picture/ {
    alias d:/luozixi/tcp_test/picture/;
    # alias是重定义路径
    # 比如访问127.0.0.1/picture/1_new.gif，则会映射为访问d:/luozixi/tcp_test/picture/1_new.gif
    # web应用根本不会收到请求，picture的请求都被nginx处理了
    # alias是替换，root是拼接
    autoindex on;
    # 访问127.0.0.1/picture/，会得到目录的索引界面
    }
  }
}

　2. Reload the nginx configuration

nginx -s reload

　3. At this time, when requesting static resources, nginx will automatically add etag and last-modified to the response header

　

　4. But then I found that if cache-contrl: no-cache is not configured, the browser will not send the request to the backend the next time it requests this resource, but Get resources directly from the cache

　5. Configure

location /picture/ { 
  add_header cache-control no-cache;
  alias d:/luozixi/tcp_test/picture/; 
}

in nginx　6. After clearing the browser cache and making the first request, you will get a normal 200 response, and the response header There is already cache-control: no-cache, which means using negotiated cache

7. After making the request again, you will find that the request header has included if-modified-since and if-none-match.

　

8. After receiving these two items, the server (nginx) will compare it with the etag and last-modified currently generated by the resource. If both are consistent, it means If the resource is not updated, the server will return a 304 empty response; otherwise, it means that the resource has been updated, and the server will return the complete resource content

. In addition, the way the server verifies if-modified-since is just a simple string In comparison, even if the last-modified of the resource is earlier than if-modified-since, the server still thinks that the resource is updated

　9. After the browser receives the 304 response, it will fetch the resource from the browser cache. Therefore, the speed is very fast

　

The difference between no-cache and no-store

No-cache means not to cache expired resources. The resource will be processed after confirming the effective processing to the server

, and no-store is the real non-caching.

The above is the detailed content of How to set up browser negotiation cache based on nginx. For more information, please follow other related articles on the PHP Chinese website!