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

jojeon4515님의 프로필 이미지

작성한 질문수

손에 익는 Next.js - 공식 문서 훑어보기

데이터 재검증 방법

해결된 질문

24.08.08 12:23 작성

·

85

·

수정됨

1

강의에서 데이터를 재검증하는 방법으로 route handler를 생성하고 그 안에서 revalidateTag 함수를 호출해서 캐시를 지우는 방법을 소개해주셨는데요! 그와 관련해서 궁금한게 세가지 있어서 질문 드립니다.

  1. 버튼과 같은 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?

  2. 위의 방법으로 캐시를 지운 후 브라우저를 직접 새로고침해야 새로운 데이터를 가져와서 화면상에서 갱신이 되던데 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?

  3. next.js에서도 react처럼 axios를 많이 사용하나요? 제가 지금까지 이해한 바로는 next.js는 여러가지 캐싱 기능을 fetch를 이용한 요청으로 제공하는 거 같더라구요. 그리고 공식문서나 다른 블로그 글들 혹은 강의를 봐도 데이터 패칭 및 캐시 부분에서는 fetch를 사용하는 예시만 나와서 next.js의 캐싱 기능을 활용하려면 fetch를 사용해야 하는건가 싶습니다.

     react를 이용할 때에는 보통 실무에서는 axios를 많이 사용한다고 들었었는데 next.js는 어떤지 궁금합니다

답변 2

2

인프런 AI 인턴님의 프로필 이미지

2024. 08. 08. 12:26

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

jojeon4515님의 질문에 대한 답변은 아래에 기술된 질문과 답변을 참조하시면 도움이 될 것 같습니다.

  1. 클라이언트 컴포넌트에서 데이터 재검증 방법에 관한 질문으로, “비동기 호출, fetch, 라우트 핸들러 관련 질문입니다.”에서 유사한 문제가 다뤄졌습니다. 이 답변에서는 클라이언트 컴포넌트에서 fetch를 사용하여 API 요청을 하는 방법에 대해 설명하고 있습니다. 클라이언트에서 데이터 재검증을 위해 서버 컴포넌트 또는 server actions을 통해 revalidateTag 함수를 호출하는 과정이 구체적으로 언급되어 있습니다.

  2. 캐시를 지우고 데이터를 즉시 갱신하는 방법에 관련하여, “revalidate 질문”에서는 revalidate의 작동 방식과 클라이언트 사이드에서 캐시를 지운 후 바로 화면을 갱신하는 방법에 대한 질문과 답변이 포함되어 있습니다. 특히 이 답변에서는 새로 고침하지 않고도 캐시를 지우고 데이터를 갱신하는 방법에 대한 추가적인 설명이 있어 관련 내용을 찾는 데 유용할 것입니다.

위의 링크들을 통해 클라이언트 컴포넌트에서 데이터 재검증을 수행하는 방법과 캐시를 지운 후 화면을 바로 갱신하는 방법에 대한 답변을 얻을 수 있습니다.

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

1

하조은님의 프로필 이미지
하조은
지식공유자

2024. 08. 09. 10:08

안녕하세요! 질문 남겨주셔서 감사합니다. 하나씩 답변드려볼게요!

 

클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?

revalidateTag를 사용하는 이유에 대해 생각해보면 좋을 것 같습니다. 해당 함수는 캐시된 데이터를 비우고 새로운 데이터를 사용할 수 있도록 만들기 위해 사용합니다. 강의에서 캐시된 데이터는 서버에 존재하는 상태입니다. 때문에 서버에 있는 캐시를 비우기 위해 Route Handler를 이용해 서버에서 revalidateTag를 호출해 캐시를 비워야만 합니다.

Route Handler를 이용하지 않고 서버에서 캐시를 비우는 방법으로는 Server Actions를 활용하는 방법이 있을 수 있습니다. 이는 강의에서 다루지 않았지만 공식 문서에서 다루고 있는 방식을 참고하시면 좋을 것 같습니다. 결국 서버에서 캐시된 값은 서버에서 해제해야 한다는 것이 규칙임을 알 수 있습니다.

 

직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?

새로고침 없이 화면 상의 모습을 갱신하기 위해선 클라이언트 컴포넌트를 사용해야 합니다.

새로고침 없이 데이터 갱신이 필요한 곳을 모두 클라이언트 컴포넌트로 활용하는 방법입니다. 이는 기본적인 React 활용 방식과 동일하게 API 응답값을 useState와 같은 상태로 저장해서 관리하는 방식입니다.

 

next.js에서도 react처럼 axios를 많이 사용하나요?

이번 App Router가 등장한 Next.js 13 이후에는 fetch 사용을 권장하고 있습니다. 캐시와 같은 성능 향상의 이점을 보기 위함입니다. 하지만 사용성 등에서 불편함을 느끼고 Axios와 같은 라이브러리를 쓰는 사례도 많습니다. 관련 사례를 소개하는 글을 남겨둘게요! https://blog.deercorp.com/next-js-app-router-and-fetch-library/


추가 질문 있으시면 언제든 남겨주세요! 답변이 도움되셨으면 좋겠습니다.

감사합니다.

jojeon4515님의 프로필 이미지
jojeon4515
질문자

2024. 08. 09. 10:13

답변 감사합니다!