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

안녕하세요! revalidateTag 함수 관련 코드를 보다가 궁금한 점이 생겨서 질문 드립니다!

우선 fetch를 통해 데이터를 받아오는 비동기 호출은 서버 컴포넌트에서만 호출할 수 있다고 해서 날씨API나 시간API를 서버 컴포넌트에서 fetch를 이용해 받아오는 것 까지는 이해가 갔습니다.

그런데 아래와 같이 캐시를 비우는 버튼을 만들 때는 클라이언트 컴포넌트에서 fetch가 사용되었습니다.

'use client'
type Props = {
    tag : string
}
export default function RevalidateButton({tag} : Props) {
    const handleClick = async () => {
        const res = await fetch(`/api/revalidate?tag=${tag}`, {
            method : 'POST'
        })
        console.log(res)
    }
    return <button onClick={handleClick}>캐시 비우기</button>
}

일단 이벤트 핸들러는 클라이언트 컴포넌트에서 사용 해야 되서 'use client'를 작성하는 것도 이해가 갔습니다. 그리고 revalidateTag 함수는 서버 컴포넌트에서 호출되야 하니깐 'api요청을 보내야 되서 fetch를 사용해야 한다' 라고 이해를 했는데요.. 그럼 혼란 스러운게..

1. 'fetch비동기 호출은 서버 컴포넌트에서 하라고 되어 있는데 revalidateTag같이 서버 컴포넌트에서 동작하는 함수를 호출하기 위해서는 어쩔 수 없이 fetch를 클라이언트 컴포넌트에서 사용해야한다' 라고 이해 하는게 맞을까요??

   
   

2. 그리고 위의 코드에서 method : 'POST' 라고 세팅하여 주셨는데 보내는 방식은 POST로 정해져 있는 것인지, 다른 메서드 (get, update, delete)로 사용하면 안되는 것인지 궁금합니다!
   

3. 아래는 핸드북(3. Next.js 손에 익히기 / 7.날씨데이터 조회하기 / 데이터 재검증하기 )에 설명해주신 내용인데요!

   revalidateTag는 서버 사이드에서 호출 가능합니다. 하지만 캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다. 때문에 API 형태로 revalidateTag를 호출할 수 있도록 만들어야 합니다. Next.js에서의 API는 라우트 핸들러를 통해 만들 수 있습니다.

   "캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다." 라는 말이 RevalidateButton 버튼을 클릭했을 때 handleClick 함수가 호출되는 때를 말씀하신 것인지 궁금합니다.
   

4. 아래는 revalidateTag가 호출되는 서버 컴포넌트 코드입니다.

   import { revalidateTag } from "next/cache";
   import { NextRequest, NextResponse } from "next/server";
   
   export async function POST(req:NextRequest) {
       const tag = req.nextUrl.searchParams.get('tag');
   
       if(!tag) throw new Error('태그는 필수!!')
   
       revalidateTag(tag) 
       return NextResponse.json({message : '재검증에 성공했습니다', tag})
       
   
   }

   revalidateTag 함수는 호출시 에러가 발생하는 경우는 없는건가요?? 제 생각에는 revalidateTag도 제대로 작동을 안할 수도 있으니깐 try catch 문으로 감싸서 호출하는게 맞지 않을까? 생각이 들었는데 그렇게 안해도 되는 것인지 궁금합니다!