특정 상황에서 상세페이지에 적합한 렌더링 방식은 무엇인가요?
현재 페이지 라우터 강의까지 듣고 궁금한 점이 생겨서 질문드립니다!
Q1. 다음과 같은 상황일 때, book페이지는 어떤 렌더링 방식이 적합한가요? SSG, SSR, ISR 모두 완벽히 맞아 떨어진다는 생각이 들지 않아 질문드립니다
데이터 변경 가능성이 적고, 관리자 서비스를 통해 데이터가 변경되나, 변경 시점이 명확하지 않은 경우
on-demand revalidation 사용이 안되는 경우 (next12)
Q2. 만약 on-demand revalidation을 사용할 때, 별도의 서비스에서 일어난 요청을 기준으로 렌더링을 해야한다면 그 요청이 일어났음을 알 수 있는 방법이 있나요?
답변 2
1
안녕하세요 이정환입니다.
재미있는 질문이네요! 순서대로 답변 드리겠습니다.
Q1의 경우
최신 데이터 반영이 얼마나 빠르게 이루어져야 하는지에 따라 달라질 것 같아요 만약 조금이라도 늦어선 안된다면 SSR을 선택해야 할 것 같고, 그렇지 않다면 짧은 초 주기의 시간 기반 ISR을 선택할 것 같습니다.
Q2의 경우
전형적인 웹 사이트라면 보통은 백엔드 서버에서 알 수 있죠! 예를들어 게시글 상세 페이지가 있다고 가정하면, 해당 게시글이 수정되거나 댓글이 추가되는 API가 백엔드 서버에게 요청되면 이 타이밍에 revalidate 요청을 보내면 됩니다. 또는 만약 서드파티 서비스를 사용하시는 상황이라면 해당 서드파티에서 제공하는 웹훅이나 트리거등의 연동 기능을 활용하셔야 할 것 같아요
0
혹은 데이터의 변경이 정말 잦지 않고 어드민만 데이터를 변경한다면 SSG 페이지로 설정 후 데이터 변경시 마다 프로젝트를 다시 빌드하는 방법도 고려해볼 수 있을 것 같아요
보통 개인 블로그 프로젝트의 경우 이렇게 많이 작업하시더라구요!
1
안녕하세요, 인프런 AI 인턴입니다. jb님!
Next.js에서의 렌더링 방식 선택과 관련된 질문에 답변을 드리겠습니다.
Q1. 데이터 변경 가능성이 적고 on-demand ISR 사용이 불가능할 때 적합한 렌더링 방식
- 상황 요약: 데이터 변경은 적지만 변경 시점을 정확히 알 수 없고, Next.js 12 이전 버전을 사용하여 on-demand ISR(Incremental Static Regeneration)을 활용할 수 없는 경우입니다.
Static Site Generation (SSG): 데이터가 자주 변경되지 않는 경우, SSG가 적합할 수 있습니다. 정적 페이지는 빌드 시에 생성되고, 먼저 사용자에게 매우 빠르게 제공될 수 있습니다.
Server-side Rendering (SSR): 모든 요청에 대해 최신 상태로 페이지가 필요하다면, SSR을 고려할 수 있습니다. 하지만 이는 성능에 영향을 줄 수 있습니다.
ISR 사용 불가: 만약 버전 제한으로 ISR을 사용할 수 없다면, 관리자 서비스에서 업데이트가 있을 때마다 정적 페이지를 재생성하는 방식을 통해 최신 데이터를 제공할 수 있게 하거나, SSR을 고려해야 합니다.
Q2. 별도의 요청을 기준으로 렌더링을 해야하는 경우
on-demand ISR을 사용하려는 상황이지만 Next.js 12 이전이라 사용할 수 없는 경우에 대해서는 다른 접근법이 필요합니다.
Webhook 사용: 데이터가 변경될 때마다 푸시 요청을 백엔드로 보내는 웹훅을 설정하여 페이지를 업데이트 합니다. 이를 통해 변경이 감지되었음을 확인할 수 있습니다.
Custom API Route 활용: Next.js에서 커스텀 API 라우트를 생성한 후, 이를 트리거로 사용하여 변경을 감지하고 해당 정보를 클라이언트에게 전달하는 방법이 있습니다.
관련 링크
유사 질문과 답변들이 다음의 URL에서 확인 가능합니다:
위 링크에서는 사전 렌더링 방법에 대한 다양한 시나리오에 대한 논의가 진행되고 있으며, 이를 통해 추가적인 인사이트를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
54
2
@/styles/globals.css'
0
50
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
106
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
111
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1