Next14 서버컴포넌트의 이미지최적화
개인프로젝트에서 Next 14 버전을 사용해 봤는데, 전에 사용했던 12 버전과 많은 부분이 달라져서 14 버전 서버컴포넌트에서 이미지 최적화를 적용한 후기를 남깁니다. 일단 순수 리액트에서 csr 하던 방식으로 구현을 했습니다. 3g네트워크 환경에서 테스트를 했습니다. csr방식이니 일단 dom이 마운트 되고 나서 백엔드에 api호출을 합니다. 그리고 응답을 받으면 그제서야 응답에 포함된 image url에 요청을 해서 이미지를 받아옵니다. 유저는 api 네트워크 pending기간동안 흰 화면을 볼 수밖에 없습니다. 로딩처리 정도는 해줄수 있겠죠! 해당 api를 서버측에서 호출해서 서버컴포넌트로 랜더링 해보겠습니다. 이번에는 ssr을 적용했기 때문에 클라이언트에서 따로 네트워크 요청이 없이 html 자..
[NextJS]Minified React error #425,418,423 해결
개발 후 테스트 서버에 배포하고 나서야 발생한 에러 구글링을 해보니 대부분 date time과 관련된 문제라고 한다. 아니나 다를까 new Date()를 사용해서 날짜를 표현하는 페이지였다. 정확히 무슨 문제일까 Next로 개발을 하면 getServerSideProps를 쓰지 않더라도 순수 React와 다르게 페이지소스를 가져온다 나는 이 페이지에서 getServerSideProps를 만들지 않아서 별다른 fetch data가 있지는 않지만 넥스트 서버는 첫 랜더링 할 html을 제공한다. 클라이언트는 이벤트리스너를 등록하고 Dom을 배치하기 위해 서버에서 전송한 것과 동일한 html을 봐야 할 필요가 있다. 근데 이 과정에서 다른부분이 존재하면 위와 같은 에러(hydration error)가 발생한다...
[Next]이미지 최적화.. 'sharp' package is strongly recommended
제목 그대로 Next/image를 사용해서 이미지 최적화를 하는 경우 sharp를 package.json에 추가해야 한다. sharp가 없으면 배포환경 터미널에 이런 로그가 계속찍히고 있을지 모른다. 연휴가 끝난 바로 다음날 사용자가 몰리면서 cpu사용률이 100%에 달해서 인스턴스가 죽었다 살아나기를 반복.. 원인은 이미지 최적화에 과부하가 걸린것이다. next서버가 원격 이미지를 가져와서 해당 buffer를 가지고 이미지 최적화를 해서 프런트엔드로 서빙해 주는데 이 과정에서 두 가지 패키지를 사용한다. sharp와 squoosh이다. 두 개나 쓴다니? 우선적으로 sharp를 쓰고 없으면 squoosh를 쓴다. next/image의 소스코드를 보면 production 배포일 때, showSharpMis..
특정 DOM요소까지 스크롤하기
기획요구사항 중에 알림 내역을 클릭하면 페이지를 이동해서 해당 요소가 포커스&스크롤 되도록 해달라는 요구사항이 있었다. 컴포넌트 부모자식 관계가 아닌 전혀 다른 페이지로 이동했을때 클릭한 dom요소를 찾아서 스크롤시키기 위해 필요한 데이터를 쿼리스트링으로 전달하는 방법으로 구현했다. 1. 필요한 데이터 쿼리스트링으로 보내기 next의 useRouter에서 반환해주는 push메서드를 사용해서 pathname, query옵션을 사용해서 원하는 데이터를 넘겨준다. url에 쿼리스트링을 전달하고 이동하는 페이지에서는 이 쿼리스트링을 추출해서 사용한다. http://localhost:3000/seller/review/2001248?state=question&target=604 useRouter의 query로 이 ..
SSG를 on-Demand ISR 로 변경
SSG Next를 사용하기 전에는 Next가 서버사이드 렌더링을 하기 위해 사용하는 프레임워크라고 생각했는데, 공식문서에서도 더 권장하기도 하며 성능상으로도 SSG(Static Site Generation)를 더 많이 사용하게 된다. SSG는 Page폴더 안의 파일에서 getStaticProps라는 함수를 작성함으로써 구현할 수 있다. SSG는 프로젝트 빌드 시점에 이 페이지를 프리랜더링 하게 된다. 유저의 요청보다 먼저 빌드되며 성능상의 이점을 위해 미리 생성한 HTML와 JSON파일을 CDN에 캐시 해놓는다. 덕분에 seo에도 탁월하고 매우 빠른 페이지를 가지게 된다. 단점이 있는데, 빌드 시점에 딱 한 번만 CMS를 통해 데이터 패칭을 하므로 빌드 이후에 데이터가 변해도 변한 데이터를 보여주지 못한..
Next.js Image Optimization 문제점: 최적화 과정 과부하
Next는 리액트 프레임워크이다. 엄청 좋은 기능들을 제공하는데, 그중 큰 장점은 Image 최적화도 알잘딱깔센으로 제공한다는 것이다. Image/next 컴포넌트의 props를 하나하나 읽어보면 얼마나 편리한지 알 수 있다. https://blog.logrocket.com/next-js-automatic-image-optimization-next-image/ Next.js automatic image optimization with next/image - LogRocket Blog Learn about automatic image optimization and how it can benefit developers with the native, game-changing, and powerful next/..