nextjs

React 18v 부터 새롭게 추가된, 새로운 유형의 컴포넌트 Page Router의 단점 중에서 상호작용에 필요하지 않은 컴포넌트가 JS Bundle에 포함되는 점이 있었죠?App Router 에서는 React Server Component로 이를 해결할 수 있게 되

페이지 이동은 Client Side Rendering 방식으로 Page Router와 동일한 방식입니다. 하지만 프리페칭(이동할 페이지의 데이터를 미리 불러오는 기능)에서 차이가 있습니다!위의 이미지와 같이 JS Bundle, RSC Payload를 따로 가져옵니다.

Page Router에서 데이터 페칭은 어떻게 이루어졌나요? Page 컴포넌트에서 사전 렌더링을 지시하는 함수를 이용해서 데이터를 페칭했습니다. Page Router에서는 React Server Component의 개념이 없기에, 데이터를 가져올 때도 코드가 2번 실행

파일 시스템 기반의 간편한 페이지 라우팅 제공동적 경로도 설정 가능Catch All Segment : ex.book...id -> book/1 , book/1/23 , book/1/2/3/44Optional Catch All Segment : ex.book\[...i

풀 라우트 캐시 Next 서버 측에서 빌드 타입에 특정 페이지의 렌더링 결과를 캐싱하는 기능. Static Page만 풀 라우트 캐시가 됩니다. Static Page VS Dynamic Page Dynamic Page 캐시되지 않는 Data Fetching 사용하

큰 데이터를 잘라 연속적으로 보내는 것스트리밍을 이용하게 되면 일단 뭐라도 빠르게 보여줄 수 있기에 오래 걸리는 컴포넌트의 렌더링을 사용자가 좀 더 좋은 환경에서 기다릴 수 있게 해줄 수 있습니다.Dynamic Page에서 자주 사용됩니다.loading.tsx는 하위의

서버 액션 브라우저에서 호출할 수 있는 서버에서 실행되는 비동기 함수입니다. 서버 액션들은 컴파일 결과, 자동으로 특정한 해시값을 갖는 API로서 설정되기 때문에, 브라우저 측에서 이 서버액션을 호출할 때 request 헤더에 next action이라는 이름으로 현재