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

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

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

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

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

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

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

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

클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 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/

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

감사합니다.