Можно ли закэшировать в браузере только статику?

Нет, в браузере можно закэшировать не только статику. Кэширование работает для любых ресурсов и API ответов, если это разрешено HTTP заголовками.

HTTP Кэширование

Браузер кэширует ресурсы на основе HTTP заголовков Cache-Control, ETag, Last-Modified и других. Это относится ко всему: HTML, CSS, JS, изображениям, API ответам и даже XHR запросам.

Основные заголовки кэширования

// Статика (длительное кэширование)
// Cache-Control: public, max-age=31536000

// HTML (короткое кэширование)
// Cache-Control: public, max-age=3600

// API ответы (кэшируются, если не запрещено)
// Cache-Control: max-age=300

// Запретить кэширование
// Cache-Control: no-store, no-cache

Кэширование API ответов

// Fetch с использованием браузерного кэша
fetch('/api/users', {
  method: 'GET',
  // Браузер автоматически использует Cache-Control из ответа
})
.then(response => response.json())
.then(data => console.log(data));

// Сервер отправляет:
// Cache-Control: public, max-age=600
// Браузер кэширует ответ на 10 минут

IndexedDB и LocalStorage

Для более гибкого контроля можно использовать:

// LocalStorage (синхронное, до 5-10MB)
localStorage.setItem('user-data', JSON.stringify(userData));
const cached = JSON.parse(localStorage.getItem('user-data'));

// IndexedDB (асинхронное, до GB)
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(['cache'], 'readwrite');
  const store = transaction.objectStore('cache');
  store.put({ key: 'api-response', data: apiData });
};

Service Workers

Самый мощный инструмент для кэширования всех ресурсов:

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/api/initial-data' // Можно кэшировать API
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Вывод

Кэширование в браузере доступно для всех типов ресурсов: статики, HTML, CSS, JS, API ответов. Выбор метода зависит от требований проекта.