[코드잇 스프린트 14주차 위클리 미션] Next.js 마이그레이션

 

이미지 이슈

 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images.

외부 url에서 받아오는 이미지의 경우는 next/Image를 통해 이미지를 최적화하는 것을 고려하라고 한다.  반면에 외부에서 받아오는 이미지가 아닌 서버 자체, 즉 프로젝트 assets에 있는 이미지의 경우는 Image를 적어주지 않으면 보이지가 않았다.

 

 

서버 내에 존재하는 이미지는 Image 컴포넌트를 이용해야 이미지가 제대로 뜨지만 next.config.js 설정을 별도로 해주지 않았기에 link[imageSource] 부분 때문에 Image 컴포넌트를 이용할 수 없었다. 후에 next.config.js 설정을 변경하고, Image컴포넌트로 바꾼 다음 생각해보자

 

+

CDN을 사용해볼까?

 

 

서버사이드 렌더링이라고 html을 매번 내려주는 것은 아니다?

 

 

위 검색결과를 렌더링할 때 서버사이드렌더링을 진행했다 (getServerSideProps를 사용했다) 코드잇 Next.js 강의에도 있지만 매 검색을 할 때마다 html을 새로 내려주지는 않고, 일단은 필요한 데이터만 받아왔고, 위 화면 상태로 새로고침을 했을때는 위 데이터를 포함한 온전한 html을 내려주었다.

 

 

일단 이렇게 데이터만 받아오는 것을 확인할 수 있다.

 

그 후에 위 하면인 상태로 새로고침을 하면,

 

위와같이 온전한 html을 불러온다.

 

이에 대한 답은 코드잇 강의에 나와 있었다.

 

Next.js는 CSR과 SSR을 적절히 섞어서 최적화를 해준다고 한다. 특히, Link 태그로 연결된 페이지의 경우, 페이지 이동시 CSR 방식으로 동작을 한다.