Tell about browser caching and how to configure it. What should be cached and what not?

Browser caching is a mechanism for storing website resources (such as HTML, CSS, JS, images) in the browser's local storage to speed up loading on subsequent visits.

Caching settings are usually configured through HTTP headers:

• Cache-Control — the main header where directives can be specified, such as max-age (cache lifetime), no-cache, no-store.
• ETag — a unique identifier for the resource version, helps the browser check if the file has changed.
• Expires — an outdated but sometimes used header with an expiration date.

What to cache:

• Static resources: CSS, JS, images, fonts — they can be cached for a long time (e.g., a month or more), especially if the filename changes upon update (cache busting).

What not to cache:

• Dynamic content that changes frequently (e.g., HTML pages with personal data).
• API requests with current data.

Example of header configuration in server response:

Cache-Control: public, max-age=31536000

This means the resource can be cached publicly for 1 year.

Proper caching improves performance and reduces server load.