next.js

Next.js는 기본적으로 모든 페이지를 pre-render 한다.  Next.js Next.js는 리액트에서 SSR(Server Side Rendering) 을 쉽게 구현할 수 있도록 도와주는 간단한 프레임워크Next.js는 pre-rendering을 통해 완성된 HTML을 가져오기 때문에 검색 엔진 크롤러에 바로 렌더링 된 페이지를 전달할 수 있어 검색 엔진 최적화(SEO)를 이룰 수 있다.초기 페이지 로드 속도 또한 CSR(Client Side Rendering)에 비해 빠르다는 장점을 가지고 있다.   Pre-rendering Next.js는 두 가지 방식으로 pre-rendering을 지원한다정적 생성 (Static Generation)서버 사이드 렌더링 (Server Side Rendering..

안녕하세요 오늘은 Next.JS(v.13) + TypeScript 환경에서 무한스크롤 구현하는 방법에 대해 알아보겠습니다 배경.. 프로젝트에서 숙박 아이템을 확인할 수 있는 리스트를 구현하는데 모든 아이템을 한번에 가져와서 보여줄 수도 있지만 그렇게 하면 초기 렌더링 속도가 늘어나는 단점이 있어 무한스크롤로 구현하였습니다! 무한스크롤 구현하기! 1. 서버로 부터 받는 데이터 정의 처음 무한스크롤을 구현한다고 백엔드 분께 얘기했을 때 백엔드 분들께서 그럼 데이터를 어떤 형식으로 보내줘야 하냐고 여쭤보셨습니다 무한스크롤에 필요한 데이터는 다음과 같습니다 실제 아이템 리스트 데이터 현재 페이지 넘버 다음 페이지가 존재하는지 boolean 값 2. 무한스크롤 구현 저는 React Query에서 useInfini..