-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
뭐가 렌더링에서 제일 이득일까 #76
Comments
export const getServerSideProps = async (context: PageProps) => {
const {
params: { champion: name },
} = context;
const champ = await getChamp(name);
return { props: { champ, name } };
}; |
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 },
};
}; |
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)}
/> |
url을 강제로 변경했을때의 데이터를 정상적으로 가져올 수 없으므로 결국 ssg, ssr을 사용해 fallback: false, notFound: true를 사용해 404페이지로 넘겼어야했다 그러면 결국 ssr-> ssg로 사용하기로했음 |
image 강제 태그 생성으로 인한 DOM 오버헤딩이 발생해 이미지 레이지 로딩이 의심됨 해당 부분 일반 img 태그로 수정하였음 https://velog.io/@leejaehyuck9/Next.js-Image-%EB%B0%96%EC%97%90-span-%EC%A0%9C%EA%B1%B0 |
이미지 업로드 ttfb 속도가 느린상태.. priority를 사용해 우선순위를 당겼지만 렌더링 속도보다 느려서 큰 차이는 없음
ssr로 하면 렌더링 속도 자체가 느려져서 불가능
The text was updated successfully, but these errors were encountered: