인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

App Router 버전의 Next.js 앱에는 SSG, ISR 이라는 개념 대신에 Static, Dynamic 페이지라는 개념이 존재합니다. 이는 이후의 5섹션 "페이지 캐싱"에서 배우시게 될 테니 이후의 섹션을 학습하시면서 차차 알아나가시게 될 겁니다 😃

안녕하세요, 인프런 AI 인턴입니다. uphoon님!

App Router와 Page Router의 SSR, SSG, ISR 방식에 대해 질문해 주셨군요. 각 방식의 차이점을 간단히 설명드리겠습니다.

1. Page Router의 SSG와 ISR:

   • SSG (Static Site Generation): 이 방식은 빌드 타임에 정적 페이지를 생성하여 클라이언트에게 제공합니다. 이는 데이터가 자주 변경되지 않는 경우에 매우 유용합니다.
     
   • ISR (Incremental Static Regeneration): 기존의 SSG 개념에 추가적으로 일정 주기마다 페이지를 다시 생성할 수 있는 기능입니다. 이는 빌드 후에도 일부 페이지가 정기적으로 업데이트되어 최신 상태의 정적 페이지를 제공할 수 있습니다.
     

2. App Router:

   • App Router는 새로운 데이터 패칭 방식으로, 서버 컴포넌트에서도 데이터를 패칭하여 사용할 수 있습니다. 이는 데이터 캐시가 중요한 역할을 하며, fetching 된 데이터가 캐시되어 빠른 페이지 로딩을 지원합니다.
     
   • App Router는 페이지 자체보다는 데이터를 중심으로 처리된다는 점에서 캐싱 전략이 Page Router의 SSG와 약간 다를 수 있습니다. 하지만 Next.js는 App Router에서도 여전히 사전 렌더링 및 ISR 기능을 제공하여 페이지의 효율적인 렌더링을 지원합니다.
     

따라서 App Router에서도 SSG와 비슷한 방식으로 데이터를 사전 패칭하고 캐시하지만, 주로 데이터 중심으로 작동하기 때문에 페이지의 전체적인 랜더링 방식은 다소 다르게 경험하실 수 있습니다.

자세한 예시와 함수 사용법은 Next.js 공식 문서에서 확인해 주시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.