Как сделать так, чтобы картинка в next.js (next/image) с blur плейсхолдером не загружалась заново каждый раз, когда ты заходишь на эту страницу?

Question

[dandan13]

Добрый день!

У меня такая проблема, я использую next/image на своем сайте с blur placeholder. Когда я захожу на страницу (например home page), сначала показывается blur плейсхолдер, потом грузится большая картинка и плейсхолдер исчезает. Всё как должно быть... Но! Когда я захожу на другой путь или страницу, и возращаюсь снова обратно - то плейсхолдер грузится опять, вместе с картинкой (размер страницы я не меняю). Почему так? Разве Google Chrome Engine не должен сохранять их в кеш, и если нет, можен ли next.js как нибудь сохранить их, чтобы не грузить каждый раз? Я использую картинку вот так, пути грузятся из json, но я пробовал и напрямую, тот же эффект:

<Image
             placeholder="blur"
             src={project.project_image}
             blurDataURL={project.project_image_blur_img}
             width={project.project_image_width}
             height={project.project_image_height}
             layout="responsive"
></Image>

Спасибо!

Answer 1

[dandan13]

Вообщем, у меня заработало после того как я стал импортировать картинки статично. Так, мне теперь не нужно использовать собственные blur placeholder картинки тоже, next.js сам создаёт их для меня. Также я увеличил время кеширования в next.config.js

Выглядит всё примерно вот так:

import image1 from '../public/home-background-desktop.webp' //это статичный импорт

//это сама картинка
<Image
             placeholder="blur"
             src={image1}
             blurDataURL=""
             width={1600}
             height={1200}
             layout="responsive"
></Image>

А это next.config.js Как видите minimumCacheTTL: 1200 это время для кеширования. 1200 секунд (20 минут вроде).

module.exports = {
  ...nextTranslate(),
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 64],
    minimumCacheTTL: 1200, 
  },
};