뭐가 렌더링에서 제일 이득일까

[jiho3894]

이미지 업로드 ttfb 속도가 느린상태.. priority를 사용해 우선순위를 당겼지만 렌더링 속도보다 느려서 큰 차이는 없음 ssr로 하면 렌더링 속도 자체가 느려져서 불가능

[jiho3894]

export const getServerSideProps = async (context: PageProps) => {
  const {
    params: { champion: name },
  } = context;
  const champ = await getChamp(name);
  return { props: { champ, name } };
};

[jiho3894]

ssg로 상세 페이지를 미리 정적 생성해봤지만 오히려 이미지x -> 이미지 blur -> 이미지 paint로 더 이상해짐

export const getStaticPaths: GetStaticPaths = async () => {
  const { data: Champions } = await instance.get("/champ");
  return {
    paths: Champions.map((data: Champions) => {
      return {
        params: {
          champion: data.id,
        },
      };
    }),
    fallback: false,
  };
};

export const getStaticProps = async (context: PageProps) => {
  const { champion } = context.params;
  return {
    props: { champion },
  };
};

[jiho3894]

default pre-rendering로 블러처리 시키는게 일단 제일 부드럽지만 사실 원했던건 아님 (ttfb를 실질적으로 해결한건 아니기때문)

 <Image
          width={200}
          height={200}
          alt=""
          src={String(Champion.champImg)}
          layout="fixed"
          className="rounded-xl"
          placeholder="blur"
          blurDataURL={String(Champion.champImg)}
        />

[jiho3894]

최대 2배의 속도 개선 이후 7일간 캐시를 저장해 이 전 데이터 가져오기

[jiho3894]

url을 강제로 변경했을때의 데이터를 정상적으로 가져올 수 없으므로 결국 ssg, ssr을 사용해 fallback: false, notFound: true를 사용해 404페이지로 넘겼어야했다 그러면 결국 ssr-> ssg로 사용하기로했음

[jiho3894]

사실 그대로 버벅임이 존재했었다 찾아보니 webp도 jpeg보다 30% 압축률이 좋다고 하지만 avif는 webp 보다 20% 압축률이 더 좋다

[jiho3894]

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

nextConfig에서 formats으로 avif로 설정했더니 1~4kb로 압축 시켰다 뒤에 webp는 사파리 같은 경우는 현재 지원하지않아 사파리는 webp로 나올 수 있게 설정한 모습이다

[jiho3894]

ssg 방식만 이해했지 실제로 react query 서버 데이터를 함께 html에 가져오지않고 있었다

[jiho3894]

[charleytutoring]

image 강제 태그 생성으로 인한 DOM 오버헤딩이 발생해 이미지 레이지 로딩이 의심됨 해당 부분 일반 img 태그로 수정하였음

https://velog.io/@leejaehyuck9/Next.js-Image-%EB%B0%96%EC%97%90-span-%EC%A0%9C%EA%B1%B0