[Next.js] 5. Server Rendering strategy

Next.js 14 Tutorial

1. Static Rendering

• 빌드시 HTML이 생성 됨
• 앱라우터는 기본적으로 스태틱 렌더링으로 동작
• 정적인 페이지라 성능이 좋음. 블로그, 문서, 소개 페이지에 사용 됨

동작원리

• 빌드시 RSC, 자바스크립트 청크 파일이 만들어짐
• 페이지 이동시 해당 파일들을 이용해 클라이언트 경로 생성 됨

Prefetching

• <Link /> 컴포넌트와 같이 페이지 이동 가능성이 높은경우 미리 해당 페이지 불러옴

2. Dynamic Rendering

• 사용자가 요청시 실시간으로 HTML 렌더링
• 뉴스, SNS, 쇼핑몰 페이지 등 적합
• Next.js의 cookies(), headers(), searchParams 사용하여 구현

3. Streaming

• 서버에서 HTML 전체를 생성하고 클라이언트에 전송하는게 아닌 부분적으로 생성하고 전달
• 전송되는 데이터가 큰 경우 부분적으로 렌더링되어 사용자 경험 향상