👉 Request Memoization (요청을 기억한다)하나의 페이지를 보여줄 때 중복된 API요청들을 자동으로 캐싱 👉 중요하나의 페이지를 렌더링하는 동안에 중복된 API 요청을 캐싱하기 위해 존재!그래서 렌더링이 종료되면 모든 캐시가 소멸됨Next에서 자동으로 제공👉 Data Cache 가 메모이제이션과 다른 점백엔드 서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용서버 가동중에는 영구적으로 보관      출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard 한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런이정환 Winterloo..

👉 Data Cachefetch 메서드를 활용해 불러온 데이터를 Next서버에서 보관하는 기능영구적으로 데이터 보관, 특정 시간을 주기로 갱신 시키는 것 가능불 필요한 데이터 요청 수를 줄여서 웹 서비스의 성능 크게 개선 가능const response = await fetch('/api',{ cache: "force-cache" });//요청의 결과를 캐싱함, 한 번만 불러옴//next.js 에서 fetch 라는 메서드만 사용해야함const response = await fetch('/api',{ cache: "no-store" });//데이터 페칭의 결과를 저장하지 않는 옵션//캐싱을 아예 하지 않도록 설정하는 옵션const response = await fetch('/api',{ next: { re..

👉 Data Fetching in Page Router모든 컴포넌트가 서버, 클라이언트 모두 실행특수한 함수를 이용해야만 서버에서만 데이터 패칭이 가능. 최상단에서 데이터 패칭을 해야만 함 props drilling 발생👉 Data Fetching in App RouterFetcing data where it's needed(데이터는 필요한 곳에서 직접 불러와)       출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard 한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | 한입 시리즈의 3번째 작품! 세상에서 가장 친절하..

👉  Page Router 의 장점파일 시스템 기반의 간편한 페이지 라우팅 제공다양한 방식의 사전 렌더링 제공정적 사이트 생성 (SSG) 최신데이터 X증분 정적 재생성 (ISR)유통기한 설정 가능 (최신데이터 반영)On Demand - Revalidate 요청 (즉각적으로 반영 가능) 👉  Page Router 의 단점다양한 방식의 사전 렌더링 제공 상호작용이 필요하지 않은 페이지도 JS Bundle 에 포함되어 불필요하게 번들 용량이 커진다.서버에서만 실행하면 되는 컴포넌트 (React Server Component)Hydration 시간이 길어짐 -> TTI 까지 걸리는 시간이 길어짐     출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%..

👉  Next.js 다양한 사전 렌더링서버사이드 렌더링 (SSR)가장 기본적인 사전 렌더링 방식요청이 들어올 때 마다 사전 렌더링을 진행함정적 사이트 생성(SSG)빌드 타임에 미리 페이지를 사전 렌더링 해 둠증분 정적 재생성 (ISR)향후에 다룰 사전 렌더링 방식  👉  SSR - 서버 사이드 렌더링 (요청이 들어올 때 마다 사전 렌더링을 진행)export const getServerSideProps = () => { // 컴포넌트보다 먼저 실행, 컴포넌트에 필요한 데이터 불러오는 함수 // 오직 서버측에서만 한 번 실행 const data = 'hello' return { //단 하나의 객체를 리턴, props 프로퍼티값을 넣어야함 props: { data, }, ..

👉  Page Router현재 많은 기업에서 사용되고 있는 안정적인 라우터React Router 처럼 페이지 라우팅 기능을 제공  👉  프리페칭(Pre-fetching) - 빠른 페이지 이동을 위해 제공되는 기능!이동할 가능성이 있는 페이지를 미리 불러오는 기능경로별로 컴포넌트들을 Spliting 해서 저장을 미리 해놓음 현재 페이지에만 필요한 JS Bundle만 전달 됨요청된 페이지의 JS Bundle 만 불러오기 때문에 Hydration 빠르게 가능 (용량 경량화)Pre Feching 으로 연결된 모든 페이지의 JS Bundle 파일을 미리 불러옴개발모드일 경우에는 Pre Feching이 적용되지 않음 Build 후 production 모드로 실행해줘야함Link Component로 이뤄지지 않은 ..