nextjs 서버사이드 데이터페칭 질문입니다.

Question

안녕하세요. 
다른분들의 고견을 여쭙고자 합니다.

next에서 app라우트 방식을 이용해서 개발을 진행하고 있는데요

좋아요한 게시글을 불러오는데. 속도를 위해서 서버사이드에서 불러와서 클라이언트 사이드에 뿌려주는데요.

클라이언트 사이드에서 좋아요 버튼을 누르면 -> 좋아요 데이터를 파이어베이스 서버에 저장 -> 좋아요 페이지에서 확인 -> 업데이트가 안됩니다.

그도 그럴것이 서버사이드는 업데이트가 되지 않기 때문이고 새로고침을 해야만 하기 때문이라고 생각합니다.

초기값을 서버사이드에서 불러온후에 그 후의 데이터들은 recoil로만 관리한다? 이런것도 아닌것 같구요.

이 문제를 해결할려면 초기데이터를 불러오는것 부터 전부다 클라이언트 사이드에서 해야만 하는 
 것 일까요?

이 문제를 해결할려면 tanstack-query를 사용해야할까요?

모르는점이 많네요. 아시는 내용이있으시면 답변주시면 너무 감사하겠습니다.

김헨리 · Accepted Answer

react-query와 recoil같은 전역 상태를 사용하지 않더라도 해결 가능합니다.

(좋아요 여부를 isLike: boolean 값으로 구분해서 표시한다고 가정하겠습니다)

질문자님이 말씀하신 것처럼, 초기에 isLike가 false로 표시된 아이템을 좋아요 버튼을 눌러서 서버 데이터의 isLike: true로 업데이트하더라도 현재 화면에는 변화가 반영되지 않아 새로고침을 하거나 데이터를 다시 받아와야 화면에 업데이트 될 것 같습니다.

state에 저장해서 update하는 방법도 있지만 저는 좋아요 버튼을 클릭해서 통신에 성공하면  데이터를 다시 받아와서 화면을 업데이트하는 방식을 선호합니다. (서버사이드 단에서 작성한 데이터 받아오는 코드를 클라이언트에도 작성)

예시코드)
const handleLikeClick = async (id: number) => {
  try {
    await postLike(id);
    getData(); // 서버에서 데이터를 다시 받아와서 화면을 업데이트
  } catch (error) {
    console.error(error);
  }
}

그러나 이 방법은 좋아요 버튼을 누른 후 통신이 성공하고 데이터를 다시 받아와서 화면에 변화를 반영하기 때문에 UX적으로 단점이 있을 수 있습니다.
이 문제를 해결하기 위해 react-query의 낙관적 업데이트를 고려해보는 것도 좋을 것 같습니다!!
* 낙관적 업데이트로 서버 응답을 기다리지 않고 클라이언트 상태를 먼저 업데이트 해서 UX를 향상시킬 수 있을 것 같네요 
참고: https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates

정 훈 · Answer

1. 서버에서 받아온 데이터를 state에 저장하고 이를 update하여 ui를 보여주는 것도 일반적인 방법이라고 생각합니다.

2. tanstack-query를 사용하여 invalidate query 혹은 setQueryData를 활용한 optimistic update를 구현하는 것도 좋은 방법 같습니다.

김태우 · Answer

코드를 전부 볼 수 없어 자세한 상황은 모르지만 제가 예상하는 문제점은 2가지가 있네요.

1. 클라이언트 사이드 렌더링을 사용중이시면 상태 관리의 문제
2. 서버 컴포넌트에서의 프리페칭을 사용중이시면 nextjs의 캐싱의 특성

2번같은 경우에는 좋아요 페이지에서 데이터를 요청할 때 cache: no-store 옵션을 주셔야 합니다.
nextjs는 기본적으로 캐싱을 이용하기 때문에 좋아요와 같이 실시간으로 변경된 데이터를 바로 보여주지 않습니다.
그래서 캐싱을 사용하지 않도록 옵션을 주면 바로바로 변경된 데이터를 확인하실 수 있습니다.

다음은 관련 공식문서 글입니다.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating