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

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

재미있는 질문이네요! 순서대로 답변 드리겠습니다.

Q1의 경우

최신 데이터 반영이 얼마나 빠르게 이루어져야 하는지에 따라 달라질 것 같아요 만약 조금이라도 늦어선 안된다면 SSR을 선택해야 할 것 같고, 그렇지 않다면 짧은 초 주기의 시간 기반 ISR을 선택할 것 같습니다.

Q2의 경우

전형적인 웹 사이트라면 보통은 백엔드 서버에서 알 수 있죠! 예를들어 게시글 상세 페이지가 있다고 가정하면, 해당 게시글이 수정되거나 댓글이 추가되는 API가 백엔드 서버에게 요청되면 이 타이밍에 revalidate 요청을 보내면 됩니다. 또는 만약 서드파티 서비스를 사용하시는 상황이라면 해당 서드파티에서 제공하는 웹훅이나 트리거등의 연동 기능을 활용하셔야 할 것 같아요

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

Next.js에서의 렌더링 방식 선택과 관련된 질문에 답변을 드리겠습니다.

Q1. 데이터 변경 가능성이 적고 on-demand ISR 사용이 불가능할 때 적합한 렌더링 방식

• 상황 요약: 데이터 변경은 적지만 변경 시점을 정확히 알 수 없고, Next.js 12 이전 버전을 사용하여 on-demand ISR(Incremental Static Regeneration)을 활용할 수 없는 경우입니다.
  

1. Static Site Generation (SSG): 데이터가 자주 변경되지 않는 경우, SSG가 적합할 수 있습니다. 정적 페이지는 빌드 시에 생성되고, 먼저 사용자에게 매우 빠르게 제공될 수 있습니다.

2. Server-side Rendering (SSR): 모든 요청에 대해 최신 상태로 페이지가 필요하다면, SSR을 고려할 수 있습니다. 하지만 이는 성능에 영향을 줄 수 있습니다.

3. ISR 사용 불가: 만약 버전 제한으로 ISR을 사용할 수 없다면, 관리자 서비스에서 업데이트가 있을 때마다 정적 페이지를 재생성하는 방식을 통해 최신 데이터를 제공할 수 있게 하거나, SSR을 고려해야 합니다.

Q2. 별도의 요청을 기준으로 렌더링을 해야하는 경우

on-demand ISR을 사용하려는 상황이지만 Next.js 12 이전이라 사용할 수 없는 경우에 대해서는 다른 접근법이 필요합니다.

1. Webhook 사용: 데이터가 변경될 때마다 푸시 요청을 백엔드로 보내는 웹훅을 설정하여 페이지를 업데이트 합니다. 이를 통해 변경이 감지되었음을 확인할 수 있습니다.

2. Custom API Route 활용: Next.js에서 커스텀 API 라우트를 생성한 후, 이를 트리거로 사용하여 변경을 감지하고 해당 정보를 클라이언트에게 전달하는 방법이 있습니다.

관련 링크

유사 질문과 답변들이 다음의 URL에서 확인 가능합니다:

• On-Demand ISR 관련 질문 - rogguh님과 Winterlood님의 질문과 답변

• getServerSideProps 사용 시 - 앙엉님과 Winterlood님의 질문과 답변

위 링크에서는 사전 렌더링 방법에 대한 다양한 시나리오에 대한 논의가 진행되고 있으며, 이를 통해 추가적인 인사이트를 얻으실 수 있습니다.

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