Next.js에서 Tanstack Query

오늘은 Next.js에서 Tnastack Query 사용하기를 알아보겠다.

export default function TodoForm({ fetchTodos }: TodoFormProps) {
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);
    const title = formData.get('title')?.toString().trim();

    if (title) {
      await fetch('http://localhost:5000/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title })
      });

      fetchTodos(); // Todo 리스트 갱신
      e.currentTarget.reset(); // 폼 초기화
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" type="text" placeholder="할 일을 입력하세요" />
      <button type="submit">추가하기</button>
    </form>
  );
}

위의 코드를 보면 SSR이라서 데이터를 업데이트할 수 없다!!

서버 컴포넌트에서 fetch를 사용한다는 것 자체가
서버에서 컴포넌트가 렌더링될 때 실행이 되는것이기 때문이다.

그래서 데이터를 새로 가져오려고 서버에게 요청을 해야 하는데, 그러려면 새로고침을 해서 서버에서 요청을 하는 방법밖에 없다.

그럼 해결을 위한 선택지

1. 서버에서 가져온 값을 초기 값으로 설정한 다음, 클라이언트 상태로 관리
2. Tanstack Query를 사용한다.

Tanstack Query의 공식문서에 Advanced Server Rendering탭에 들어가보면 app router버전의 Tanstack Query 사용법에 대해 자세히 설명되어있다.

[공식문서 링크]
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

[사용예시]

이번 팀 프로젝트에서 마이페이지 부분을 맡게되었는데
마이페이지에는 프로필 정보 변경, 프로필 이미지 변경, 내가 좋아요한 게시글 목록 등이 노출되어야한다.
SSR로 구현해보려했는데, 새로고침을 해야지만 정보가 변경되니,
Tanstack을 활용하여 클라이언트 컴포넌트로 구현해봐야겠다.