👉 스트리밍클라이언트에서는 모든데이터가 오지 않아도 지금까지 받은 데이터에 접근할 수 있음 -> 결과적으로 사용자가 긴 로딩 없이 사용자에게 좋은 경험 제공 가능스트리밍을 이용하면 일단 뭐라도 빠르게 보여줄 수 있음느리게 렌더링 되는 부분?로딩바 같은 대체 UI를 보여주면 된다!Dynamic 페이지에 자주 이용된다.페이지 스트리밍오래 걸리는 컴포넌트의 렌더링을 사용자가 좀 더 좋은 환경에서 기다릴 수 있도록 해주는 기능      👉 Stream - 개천, 강물스트리밍 - 강물에 데이터를 흘려 보내듯이 연속적으로 한 데이터씩 흘려 보내는 것   출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboar..

👉 클라이언트 라우트 캐시브라우저에 저장되는 캐시 - 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터 보관Layout을 ~/, ~/search 일 경우에 계속 불러옴 (중복 요청) - 클라이언트 라우트 캐시적용 안될 경우공통된 레이아웃만 따로 보관해서 서버에 중복요청 하지 않음자동으로 next app 에 적용되어있음클라이언트 라우트 캐시는 새로고침 되면 사라짐 (브라우저니까!) new Date().toLocaleString() //리렌더링 되는지 확인할 때 사용하면 좋음   출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard 한 입 크기로 잘라먹는 Next.js(15+) 강의 | ..

👉 Full Route Cache(풀 라우트 캐시)Next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를  캐싱하는 기능 👉 Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때 마다 매번 변화가 생기거나, 데이터가 달라질 경우캐시되지 않는 Data Fetching을 사용할 경우동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때👉 Static Page로 설정되는 기준Dynamic Page 가 아니면 모두 Static Page가 된다 (Default)동적 함수(ex: Query String)데이터 캐시페이지 분류YesNoDynamic PageYesYesDynamic PageNoNoDynamic PageNoYesStatic Page - 풀 라우트 캐시 적용  R..

👉 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, }, ..