Next.js

Next.js를 학습하면서 배운 내용을 정리하고 기록하고자 한다. Page Router와 App Router를 동시에 같이 학습하다보니 헷갈리는 부분이 많다. 그렇다보니 아무래도 각각의 차이를 정리하는 글을 많이 작성하게 되지 않을까싶다.

Page Router Server-side Rendering (SSR) 페이지가 서버 사이드 렌더링(Server-side Rendering, SSR)을 사용한다면, 해당 페이지의 HTML은 매 요청마다 생성된다.

Page Router Next.js Page Router에서는 ` 컴포넌트를 사용하여 HTML 문서의 ` 태그 및 기타 메타데이터를 수정할 수 있다.

App Router를 학습하면서 React Server Component 개념이 등장했다. 앞으로 정리하게 될 내용은 App Router에만 해당되는 내용이다. React Server Component는 무엇인가? 먼저 서버 컴포넌트가 나오게 된 이유를 살펴보자.

Next.js에서는 성능을 개선하고 비용을 줄이기 위해 다양한 캐시를 지원한다. Request Memoization (요청 메모이제이션), Data Cache (데이터 캐시), Full Route Cache (전체 경로 캐시), Client Router Cache (클

스트리밍(Streaming)은 UI를 서버에서 점진적으로 렌더링할 수 있도록 해준다. 작업을 여러 개의 청크(chunk)로 나누어 준비되는 대로 클라이언트로 스트리밍한다. 이를 통해 전체 콘텐츠가 렌더링되기 전에 일부 페이지를 즉시 볼 수 있다.

✅ Server Actions 란? Server Actions는 Next.js 애플리케이션에서 폼 제출 및 데이터 변조를 처리하기 위해 서버에서 실행되는 비동기 함수이다. 이러한 함수는 서버 및 클라이언트 컴포넌트 모두에서 호출될 수 있다.