The actual values for the ETag and Last-Modified columns don't matter much. Because of the configuration used, there is no actual request being made to the Node.js server, and clicking on the entry will show you additional detail, including that the response came "(from disk cache)". You should see them served with Cache-Control: max-age=31536000, and the HTTP status for each is 200.
The next two rows are for the versioned JavaScript and CSS assets. It means "always check with the server first, and use the cached copy if there's a HTTP 304 response." The HTTP 304 response indicates that there is not updated HTML.Ĭache-Control: no-cache doesn't mean "never used the cached copy".
Nodejs cache update#
This means that the browser knew not to use the cached HTML immediately, but instead made an HTTP request to the web server, using the Last-Modified and ETag information to see if there was any update to the HTML that it already had in its cache. The HTTP response status for that request is a 304.
This is properly served with Cache-Control: no-cache. The first row is for the HTML document that you navigated to. With the DevTools open to the Network panel, refresh the page.Īfter the page has loaded, you should see entries in the Network panel that look like the following:.Here, the columns to pay attention to are Name, Status, Cache-Control, ETag, and Last-Modified. Ĭustomize the columns that are displayed in the Network panel to include the information that is most relevant, by right-clicking in the column header:.With the modifications to the static file server in place, you can check to make sure that the right headers are being set by previewing the live app with the DevTools Network panel open. You can get familiar with the Network panel in Chrome's DevTools by working through this codelab. Make the changes described above, and you should end up with something that looks like: app.The static serving configuration in server.js starts out as this: app.
Click Remix to Edit to make the project editable.The easiest way to conditionally set this header is to write a custom setHeaders function, and within that, check to see if the incoming request is for an HTML document. Second, you need to be able to add in the Cache-Control: no-cache header, but only for your HTML documents ( index.html, in this case). But you can be explicit in your configuration anyway. Both of these options actually default to true for all HTTP responses, so in this current setup, you don't have to opt-in to get that behavior. You can break this down into two steps.įirst, the Last-Modified and ETag headers are controlled by the etag and lastModified configuration options. Along with that, setting one of two additional response headers is recommended: either Last-Modified or ETag. When responding to requests for URLs that don't contain versioning info, make sure you add Cache-Control: no-cache to your response messages. For the purposes of this codelab, assume that the hashes were generated as part of a build process that already took place. In the "real world", the process of assigning hashes and updating HTML files to include references to the latest versioned URL would be handled by a build tool, like webpack.
0 kommentar(er)
