ImagePreload

ImagePreload

이전페이지

import { useRouter } from "next/router";
import { useEffect } from "react";

// 함수 외부에 내용을 저장한다.
const preloadImageData = [];

export default function ImagePreloadPage(): JSX.Element {
  const router = useRouter();
  useEffect(() => {
    const img = new Image();
    img.src = "이미지 주소";
    img.onload = () => {
      preloadImageData.push(img);
    };
  }, []);

  const onClickMove = (): void => {
    router.push("이동할 페이지 주소");
  };

  return <button onClick={onClickMove}>이동하기</button>;
}

이후페이지

export default function ImagePreloadMovedPage(): JSX.Element {
  return (
    <>
      <img src="이미지주소"></img>
    </>
  );
}

useEffect 통해 현재페이지에서 미리 이미지를 받아 캐싱한다.

이미지를 미리 다운 받으면 좋지만 다 받으면 성능적으로 저하가 생기기때문에 다음페이지로 무조건 갔을때 필요한 이미지르 받는 것이 좋다.