Как правильно кешировать SVG спрайт?

Question

[Juniorrrrr]

Поставлена задача заменить 10 запросов к разным свг иконкам на один запрос к свг спрайту.

Создал отдельный файл свг, svgSprite.svg и в него вставил все иконки, подобно этому примеру

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon-1" viewBox="0 0 24 24">
      <rect x="0.5" y="0.5" width="23" height="23" rx="3.5"></rect>
      <path d="M10 12.5L16 18V7L10 12.5Z" fill="white"></path>
      <path d="M9 16.5556V8" stroke="white" stroke-width="2" stroke-linecap="round"></path>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
      <rect x="0.5" y="0.5" width="23" height="23" rx="3.5"></rect>
      <path d="M10 12.5L16 18V7L10 12.5Z" fill="white"></path>
      <path d="M9 16.5556V8" stroke="white" stroke-width="2" stroke-linecap="round"></path>
  </symbol>
...
</svg>

Дальше в коде использую так

<svg xmlns="http://www.w3.org/2000/svg">
      <use href={путь к файлу#idсвг} />
    </svg>

Все отображается правильно, проблема возникает при повторном ререндере компонента, в network браузера на каждый рендер компонента происходит запрос GET со статусом 304 данного спрайта, при этом в старом варианте, когда браузер тянул 10 запросов и получал все иконки такой проблемы нет.

Название файла не меняется, почему происходит каждый раз запрос 304 и как можно решить проблему ?

Comments

[Антон Антон]

А если заинлайнить svg в body и дальше использовать его через id#icon?

[Juniorrrrr]

Антон Антон

по поводу заинлайнить свг в боди, нужно:
- либо все свг проекта сразу инлайнить в боди, но тогда мы добавим возможно и не нужные свг
- либо изхитриться и добавлять свг по роутингу инлайново в боди, но тогда нужно быть аккуратнее чтобы не добавить повторно то что уже есть.

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

Answer 1

[Сергей delphinpro]

ну так 304 - это и есть редирект на кэшированный ресурс. То есть указание браузеру, что он не изменился, и можно взять кешированный без повторной загрузки

Comments

[Juniorrrrr]

Просто смутило столько одинаковых запросов

[Антон Антон]

Сергей delphinpro ну там есть нюанс, что сетевые запросы таки идут. И если будет не по 2мс на запрос, а по 20 (например на 3g соединении), то это будет уже заметно.

[Сергей delphinpro]

Антон Антон, ну это dev сервер. На боевом можно кэширующие заголовки настроить для картинок, и браузер не будет делать запросы до истечения установленного срока.