NEXT
1.Next.js 사전렌더링
작년 9월, 팀원들과 새로운 프로젝트를 Next.js를 사용하여 구현해보던 중이었다. 그 때 당시에는 졸업 프로젝트와 학업에 떠밀려 Next.js의 여러 장점을 채 알지 못한채 기존의 CSR로 작동하는 React프로젝트처럼 사용했던 것 같다. 구현하면서도 Image최적
2.Next.js 프리패칭
앞서 발생한 Next.js의 사전렌더링 포스트에서 페이지 이동 전 프리패칭이라는 단어가 끼어든것을 볼 수 있다. 이것은 무엇일까?이란 현재 사용자가 보고 있는 페이지에서, 이동할 가능성이 있는 모든 페이지의 javascript 코드를 사전에 불러놓는 기능이다.예를들어
3.Next.js 사전렌더링과 데이터 패칭
사전렌더링 포스트에서 언급하지 않고 넘어갔던 데이터패칭부분을 정리해 보려고 한다.단점) 초기 접속 요청으로 부터 데이터 로딩까지 오랜 시간이 걸림이유 ) 컴포넌트 마운트 시점에 데이터 요청이 이루어지기 때문기존의 리액트앱에서는 FCP가 이루어진 시점 = 컴포넌트가 마운
4.Next.js SSR getServerSideProps
가장 기본적인 사전 렌더링 방식브라우저 접속 요청이 들어올 때 마다 사전렌더링을 진행페이지 내부의 데이터를 항상 최신버전으로 유지할 수 있음데이터 응답속도가 느려지면, 사용자는 로딩을 기다려야 함루트 페이지 컴포넌트를 서버사이드 랜더링방식으로 동작하도록 만들어 보자 i
5.Next.js SSG를 정적, 동적경로에 적용하기
이란 SSR의 단점을 보완하는 사전렌더링 방식으로 빌드타임에 페이지를 사전 렌더링해둔다.SSG에서는빌드타임에 백엔드 서버에 데이터를 요청하기 때문에 데이터의 양이 많아서 응답 속도가 느리더라도 즉,장점 ) 사전렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는
6.Next.js ISR과 On-Demand-ISR
증분 정적 재생성 이란, SSG 방식으로 생성된 정적 페이지를 일정시간을 주기로 다시 생성하는 기술이다.빌드타임에 생성된 페이지에 유통기한을 설정유통기한이 끝나기 전에는 계속 똑같은 페이지 응답유통기한이 끝난 이후에는 Next서버에서 다시 새로운 페이지를 정적으로 생성
7.Next.js 페이지 라우터 / 레이아웃 설정하기
Next.js의 페이지 라우터는 page 폴더의 구조를 기반으로 한 라우팅 방식으로써, React Router 처럼 페이지의 라우팅기능을 제공한다.srcpages \- api \- \_app.tsx 페이지의 역할은 하지 않으나, Next 앱의 모든 페