선호:하다

Next의 페이지 캐싱에 대해 들어가기 전에 페이지 별 사전 렌더링 방식에 대해 다시 한 번 알아보자프로젝트를 빌드하면 페이지 별 사전 렌더링 방식을 알 수 있는데 앱 라우터에서는 정적 페이지와 동적 페이지로 나뉜다. 정적 페이지 (static page)정적 페이지는 빌드 타임에 HTML이 미리 생성되어, 서버 요청 시 별도의 연산 없이 해당 HTML을 그대로 반환하는 페이지이다.동적 페이지가 아닌 모든 페이지는 정적 페이지fetch()에 cache: "force-cache" 또는 revalidate 값이 설정되어 데이터 캐싱이 이루어지는 페이지동적 함수(쿠키, 헤더, 쿼리스트링) 등을 사용하지 않는 페이지동적 페이지 (dynamic page)동적 페이지는 매 요청 시 서버에서 렌더링이 수행되며, 사용자..

저번 포스팅까지 Page Router를 기반으로한 Next.js에 대해서 학습하였다.그렇다면 Page Router의 장단점을 정리해보고 최신 라우팅 방식인 App Router가 나오게된 배경을 살펴보자. Page Router의 장점파일 시스템 기반의 간편한 라우팅 방식pages 디렉토리 안에 파일을 생성하는 것만으로 자동으로 라우팅 설정/pages/about.tsx -> /about다양한 사전 렌더링 방식 제공 (SSR, SSG, ISR)[Next.js] 사전 렌더링과 데이터 패칭 (Page Router) Page Router의 단점페이지별 레이아웃 설정이 번거로움페이지마다 레이아웃을 중복 구현하게 되는 문제 발생데이터 패칭이 페이지 컴포넌트에 집중됨서버 측 데이터 패칭을 getServerSideProp..

이전 포스팅인 [Next.js] Next.js의 사전 렌더링과 연결되는 글입니다. 프리패칭(pre-fetching)next.js는 빠른 hydration을 위해 빌드타임에 페이지 별로 js번들을 생성하고 최초 접속시에 현재 페이지의 js번들만 다운받는 것을 이전 학습을 통해 알게되었다. 그렇다면 최초 접속 이후에 이동할 페이지에 대해서는 해당 페이지의 js번들을 새로 받아와야하는데 이때 사용되는 기술이 프리패칭이다. 프리패칭은 현재 페이지에서 이동할 가능성이 있는 페이지들의 js번들을 페이지 요청이 있기 전에 백그라운드에서 미리 다운로드받아 더 빠른 페이지 이동이 가능하도록 해준다. 프리패칭 실습프리패칭은 개발모드에서는 동작하지 않으므로 빌드 후 npm run start을 통해 프로덕션 모드로 실행해주어..

Next.jsNext.js는 리액트와 달리 라이브러리가 아닌 프레임워크이다. 즉, 리액트 개발을 개발자가 더 쉽고 편리하게 할 수 있도록 다양한 기능을 가진 틀을 제공해준다.Next.js의 다양한 기능page routingoptimizationserver pre-rendering & hydration 리액트의 단점을 해결하는 next.js의 사전 렌더링새로운 기술을 학습할 때 가장 중요한 것은 "이전 기술의 어떠한 단점을 보완했는가" 이다. next.js는 사전 렌더링이라는 하이브리드 렌더링 방식을 채택하여 기존 리액트의 csr이 가지던 단점들을 보완했다. 리액트의 csr클라이언트가 서버에 초기 접속 요청을 보낸다.서버는 클라이언트에 빈 html 파일(index.html)을 보낸다.클라이언트는 전달받은 ..