인프런 커뮤니티 질문&답변
작성한 질문수
On-Demand-ISR 방식을 index 페이지에 적용하는 방법
해결된 질문
24.08.26 18:36 작성
·
120
0
안녕하세요 선생님!
해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다.
// 강의에서 작성한 handler 코드
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
try {
// 인덱스 페이지를 요청받을 때 revalidate 되도록 하기
await res.revalidate("/");
// 재 생성이 잘 완료되었다는 걸 리턴함
return res.json({ revalidate: true });
} catch (err) {
// 재생성 실패 했을 떄 실행할 코드
res.status(500).send("실패");
console.error(err);
}
}
현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다!
useEffect(() => {
fetch("/api/revalidate")
.then((res) => res.json())
.then((data) => {
if (data.revalidate) {
console.log("페이지가 성공적으로 재생 성되었습니다.");
}
});
}, []);
답변 2
0
2024. 08. 27. 14:17
안녕하세요 이정환입니다.
우선 말씀하신대로 설정해주셔도 문제없이 동작합니다. 다만 인덱스 페이지에 방문 할 때 마다 인덱스 페이지를 재생성 하고 싶으신거라면 굳이 이렇게까지 하실 필요는 없을 것 같습니다. 이런 방법 대신에 그냥 인덱스 페이지의 Revalidate Time을 1초로 설정하시면 될 것 같아요 😃
2024. 09. 02. 16:52
답변하신 것처럼 handler를 사용하지 않고 revalidate time을 1s로 설정하면 이용이 많지 않은 페이지면 불필요한 요청이 너무 많아지는 건 아닌가요??
2024. 09. 02. 16:57
언제 활용될지는 저도 모르겠지만, 목적 자체가 방문할 때 마다 페이지를 재 생성시키는 것 이라면 (SSR 사용 X)
route handler를 사용하는 것이나 revalidate Time을 1초로 설정하는 것이나 요청의 개수 자체의 차이가 발생할 것 같지는 않습니다. 질문자님께서 올려주신 코드를 살펴보시면 어짜피 페이지가 마운트 될 때 마다 revalidate 요청을 보내고 있거든요
따라서 이런 상황이라면 매 페이지 방문마다 어짜피 revalidate 요청이 필요한 것이니, router handler를 부가적으로 또 만드시는 것 보단 revalidate : 1 옵션을 설정하는게 훨씬 간결하게 처리할 수 있다는 의미였습니다.
PS. 참고로 revalidate:1 옵션을 적용한다고 해서 무조건 1초마다 매번 페이지가 재생성 되는건 아닙니다. 시간 기반의 ISR은 사용자가 페이지에 방문할 때에 트리거됩니다. 따라서 10초간 아무도 방문하지 않았다면 Revalidate 또한 이루어지지 않습니다. 이는 우리 강의의 ISR 챕터를 확인하시면 정확히 알 수 있으니 참고해보시면 좋을 것 같아요
0
2024. 08. 26. 18:41
안녕하세요, 인프런 AI 인턴입니다.
yeongi0111님의 질문에 관해, On-Demand ISR 적용 방식과 관련하여, 질문자님이 구현하고자 하는 인덱스 페이지가 접속할 때마다 자동으로 페이지를 재 생성하는 기능과 관련된 유사한 내용을 담고 있는 기존의 지식공유자님의 답변을 찾았습니다.
On-Demand ISR 관련 질문에서 다루었듯, API Router에서 해당 경로의 페이지를 On-Demand ISR 처리하는 방법에 대해 설명하고 있습니다. 본문에서 백엔드 서버와 통신 시, 정상 응답을 받았을 때 해당 API Router를 호출하게 하면 되는지와 함께 이를 동적으로 처리하는 방안에 대해 설명하고 있습니다.
질문자님이 고민하고 있는 부분은 클라이언트 측에서 useEffect를 활용해 해당 API를 호출하는 예시와 관련이 있습니다. 이 상황에서 제시된 사용 예는 일반적인 인덱스 페이지에 대한 접근이 아니라 특정 이벤트나 조건 하에서만 ISR을 트리거하는 상황에 대해 설명하고 있습니다. 게시물에서는 On-Demand ISR을 적용할 때 페이지 개수가 많을 경우 동적으로 처리하는 방법과 안전한 방법으로 시크릿 키의 사용을 고려해야 할 수 있음을 설명하고 있습니다. 추가적으로 페이징 기능이 있는 경우 On-Demand ISR 적용에 대한 어려움도 언급하고 있습니다.
요약하자면, useEffect를 사용해 자동으로 페이지를 재 생성하는 접근법은 기술적으로 가능하나, 이 방법이 항상 최적의 방식은 아닐 수 있습니다. 서버 측 자원을 효율적으로 사용하고, 불필요한 페이지 재생성 호출을 최소화하는 것이 중요합니다. 따라서, 서버의 부하를 고려하고 이러한 호출이 반드시 필요할 때만 사용하는 것이 좋습니다.
On-Demand ISR 관련 질문에서는 비슷한 문제에 대한 해결 방안을 제시함으로써 보다 구체적인 이해를 돕고 있으니 참고하시면 좋을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 08. 27. 14:20
감사합니다!!☺