시도1. Image layout="responsive” 사용

<Image
            src="/image/logo.png"
            alt="logo"
            width="1"
            height="1"
            layout="responsive"
/>

다음과 같이 image는 width, height를 1로 주고 layout을 responsive로 하여 바깥쪽에 있는 imagewrapper div로 사이즈를 조정하는 방법.

👉 새로고침시 이미지가 비정상적으로 커졌다가 작아진다…실패.

시도2. Image layout=”fill” 사용

<Image src="/image/logo.png" alt="logo" fill />

imagewrapper div의 position을 relative로 두고 fill로 채우는 방법.

성공인 줄 알았는데 실패.

🤔 responsive와 fill이 뭐가 다르길래?

• fill : 부모 position이 relative일 경우 이미지가 부모 크기로 늘어남
• responsive : 부모 display가 block일 경우 이미지가 부모 크기로 늘어남

👉단, fill은 width와 같이 쓸 수 없고 responsive는 width와 같이 쓸 수 있다. 태그 형태를 간단히 하기 위해 fill을 사용하는게 좋을듯.

시도 3. placeholder

CLS(Cumulative Layout Shift)

어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 현상!

placeholder란?

이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 하는 것!

왜 반드시 SSR에서 width, height를 줘야 하나면요…

리모트 이미지의 경우에는 빌드 타임에 이미지 파일에 접근하는 것이 불가능하다!

따라서 width, height 정보를 기입해 줘야 하고, blur 이미지도 생성되지 않는다!

그렇다면 SVG는? 🤔

style에 어떤 값을 주던 hydration이 일어난다..

DOM트리를 구성할 때부터 해당 위치를 알게 해야 한다!

즉, CSS가 아닌 인라인으로 모든 style을 구성해야 한다…..

모든 svg을 사용할 때마다..다요? 😳

…현실적으로 힘들어 보인다!!

css를 미리 적용할 수 있는 방법이 없을까 찾아보다가, styled-component 공식 문서에서 아래 사항을 발견했다.

리하이드레이션 및 서버 측에서의 사전 렌더링을 지원하는 라이브러리가 존재한다!

react가 형성한 돔 트리에서부터 해당 스타일을 적용시켜준다고~!!

적용에는 아래 문서를 참고했다.

Nextjs에서 styled-components 깜빡임 현상

이제 서버 사이드에서 먼저 CSS를 적용할 수 있다!👍