inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

2.18) ISR 2. 주문형 재 검증

on-Demand-ISR 사용질문드립니다!

해결된 질문

214

JIN LEE

작성한 질문수 8

0

안녕하세요! on demand isr 의 실제 사용 관련해서 질문 드려요!

const revalidate = async () => {

        try {

          const response = await fetch("/api/revalidate");

          const result = await response.json();

 

          if (result.revalidate) {

               //페이지 갱신이 됐을 때

      } else {

 //페이지 경신 안됐을 때        

          }

        } catch (error) {

//에러처리

        }

      };특정 조건에 따라 on demand isr을 제대로 사용하려면 이런식으로 저희가 만든 api를 호출하는 비동기 함수를 만들어서 특정 조건문 아래에서 이 새로만든 함수를 호출하면 되는걸까요?? 감사합니다!

react typescript next.js

답변 3

1

이정환 Winterlood

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

네 맞습니다. Reavlidate를 원하시는 시점에 자유롭게 호출하는 방식으로 페이지를 갱신하면 됩니다. 참고로 이 호출은 굳이 Next.js 환경에서 하지 않아도 됩니다.
예를 들어 백엔드 서버에서도 가능하고 이용하고 계신 클라우드 서비스에서도 충분히 가능합니다.

0

JIN LEE

아 넵 완전 이해했습니다 감사합니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. JIN LEE님, on-Demand ISR을 활용한 페이지 갱신 관련 질문에 대해 답변 드리겠습니다.

on-Demand ISR(Incremental Static Regeneration)은 기존의 정적 페이지를 필요한 시점에 갱신할 수 있도록 도와주는 기능입니다. JIN LEE님이 작성한 패턴은 페이지를 갱신할 때 API를 호출하여 조건에 따라 페이지를 재생성하는 방식입니다.

설명 및 개선 방향

이 방법은 특정 조건이 만족되었을 때 API 호출을 통해 페이지를 갱신하고자 할 때 사용할 수 있습니다. 하지만, on-Demand ISR을 실제로 사용하는 경우에는 몇 가지 고려사항이 있습니다:

  1. API 보안: 보통 on-Demand ISR API는 외부에서 무작위로 호출할 수 없도록 구현해야 합니다. 따라서, 이 API 호출에 대해서 인증이 필요하거나 시크릿 키를 사용하여 보호하는 것이 좋습니다.

  2. 트리거 조건: 페이지를 갱신할 조건이 명확해야 하며, 언제 이 API를 호출해야 하는지에 대한 로직을 명확히 정의해야 합니다. 예를 들어, 데이터가 업데이트된 후에 이를 갱신해야 하는 시점을 고려해야 합니다.

여기서 API를 호출하는 비동기 함수를 조건문 하에 두어 호출하는 방법은 적절한 접근법입니다. 다만, 실무에서는 API 호출이 불필요하게 많이 발생하지 않도록 하는 방안도 고려해야 합니다.

관련 질문

On-Demand ISR 관련 질문에서는 API Router를 통해서 on-Demand ISR을 동작시키는 방법의 개괄적인 설명과 함께 동적으로 페이지 갱신을 처리하는 방법을 다룹니다. 이 자료에는 API 호출을 안전하게 관리하기 위한 방법 또한 언급되어 있으므로, 함께 참고하면 큰 도움이 될 것입니다.

질문하신 내용이 정확한가요? 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

Next.js 사전렌더링 이해하기 부분

0

22

2

모달 관련 질문

0

32

3

렌더링 관련 질문

0

76

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

59

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

60

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

73

2

npx prisma db push 시 에러가 뜹니다.

0

91

3

vercel 배포를 실패하였습니다.

0

95

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

54

2

getServerSideProps 함수와 SSR의 관계

0

76

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

58

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

112

2

일반적인 nextjs project architecture에 대하여..

0

84

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

71

2

배포 시 오류 발생

0

84

2

백엔드 서버 오류납니다.

0

80

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

89

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

103

1

[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.

0

60

2

빨간줄 설정

0

74

2

익스텐션 질문

0

58

1

강의 들으면서 궁금한 부분 질문드립니다.

0

108

1

서버 배포 에러입니다.

1

98

2

[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache

1

102

2