Shulou(Shulou.com)06/02 Report--

Xiaobian this time to share with you is a detailed explanation of nginx how to set up browser negotiation cache, the article is rich in content, interested friends can come to understand, I hope you can read this article after some harvest.

This article mainly introduces the nginx settings browser negotiation cache process detailed explanation, the article through the example code introduced in great detail, for everyone's study or work has a certain reference learning value, need friends can refer to the following

Difference between strong cache and negotiation cache

Strong cache: the browser does not negotiate with the server to directly access the browser cache

Negotiate cache: The browser confirms the validity of the resource to the server before deciding whether to fetch the resource from cache or retrieve it again

How negotiation cache works

There is now a business scenario where static resources on the backend are updated from time to time, and because browsers default to strong caching, stale resources are fetched from the browser cache by default.

Now we want the browser to confirm to the backend whether the resource is updated every time it fetches the resource, so we have to set the browser to use the negotiation cache

So how does the backend determine if a resource has been updated? The Etag and Last-Modified headers are used.

Each time a static resource request is received, the backend sends the Last-Modified time of the resource and the Etag calculated from the resource content to the frontend in the response header.

The frontend receives the response, caches the two items, and then places the contents of the two items in the If-Modified-Since and If-None-Match headers the next time it requests the same resource.

After receiving these two items, the server will compare them with the Etag and Last-Modified currently generated by the resource. If they are consistent, it means that the resource has not been updated, and the server will return a 304 null response; otherwise, it means that the resource has been updated, and the server will return the complete resource content.

achieve

So how do you implement such a complex process? In fact, it is very simple, just use nginx as a server for static resources, and then add Cache-Control:no-cache to the response header.

Let's do it step by step

1. Use nginx as a server for static resources

Map requests for static resources to disk paths for resources in nginx configuration

http { server { listen 80; ... location /picture/ { alias D:/luozixi/tcp_test/picture/; # alias is a redefined path #For example, visiting 127.0.0.1/picture/1_new.gif will map to visiting D:/luozixi/tcp_test/picture/1_new.gif # web apps don't receive requests at all, picture requests are processed by nginx # alias is substitution, root is concatenation autoindex on; #Visit 127.0.0.1/picture/to get the index interface of the directory } }}

2. Reload nginx configuration

nginx -s reload

3. In this case, when requesting static resources, nginx will automatically add Etag and Last-Modified to the response header.

4. But at this time, if Cache-Control: no-cache is not configured, the browser will not send the request to the backend the next time it requests this resource, but will directly obtain the resource from the cache.

5. Configuration in nginx

location /picture/ { add_header Cache-Control no-cache; alias D:/luozixi/tcp_test/picture/; }

6. The first request after clearing the browser cache will get a normal 200 Response, and the response header already has Cache-Control: no-cache, indicating that the negotiation cache is used.

7. When the request is sent again, you will find that the request header has already carried If-Modified-Since and If-None-Match.

8. After receiving these two items, the server (nginx) will compare them 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 null response; otherwise, it means that the resource has been updated, and the server will return the complete resource content.

In addition, the server verifies If-Modified-Since by simply comparing strings, even if the resource's Last-Modified is earlier than If-Modified-Since, the server still considers the resource to be updated.

9. After receiving the 304 response, the browser fetches the resource from the browser cache. So the speed is very block

Difference between no-cache and no-store

no-cache means that expired resources are not cached, and the cache will process resources after confirming valid processing to the server

And no-store is the real no-cache.

After reading this article on how to set up nginx browser negotiation cache, if you think the article content is well written, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.