Vercel не кэширует ресурсы (изображение, видео, аудио)

#reactjs #caching #optimization #next.js #vercel

#reactjs #кэширование #оптимизация #next.js #vercel

Вопрос:

У меня есть страница с множеством статических ресурсов (изображения, видео, аудио), что очень плохо влияет на производительность страницы.

При проверке вкладки сеть я обнаруживаю, что все эти ресурсы не кэшируются (элемент управления кэшем есть public, max-age=0, must-revalidate ), несмотря на то, что я использую Vercel для развертывания.

Я что-то упускаю или есть какие-то другие способы дополнительной оптимизации?

Ответ №1:

Vercel кэширует ваш контент на границе, используя свою пограничную сеть.

Из документации по кэшированию Vercel:

Пограничная сеть Vercel кэширует ваш контент на границе, чтобы как можно быстрее передавать данные вашим пользователям.

Статическое кэширование выполняется автоматически для всех развертываний. Это означает, что в заголовки не нужно вносить никаких изменений.

Тем не менее, вы все равно можете настроить его, переопределив Cache-Control заголовок.

По умолчанию мы возвращаем Cache-Control заголовок, содержащий public, max-age=0, must-revalidate для предотвращения локального кэширования файла клиентами (например, браузерами). Это дает вам максимальную гибкость, поскольку пользователи получают последний файл из нашего глобального CDN сразу после развертывания. Это можно переопределить с помощью свойства Headers в вашем vercel.json файле.