서버사이드렌더링 페이지에서 참조하는 DB가 변한것을 어떻게 알게 할 수 있을까요

안녕하세요. 일단 제가 이해한 상황이 맞는지 확인부터 해볼게요. "B 페이지에서 DB로의 mutation 요청을 수행한 뒤, A 페이지로 Client Side Navigation(<Link> Component 또는 useRouter() Hook)을 통해 이동했을 때 A 페이지에서 변경된 데이터가 반영되지 않은 상태로 보인다." 가 맞나요? 제가 이해한 상황이 맞다면, Next.js의 Router Cache라는 캐싱 메커니즘 때문에 곤경에 처하신 것 같아요. Router Cache의 동작에 대한 자세한 메커니즘은 공식 문서를 참고해 보세요. (https://nextjs.org/docs/app/building-your-application/caching#router-cache) 여하튼 메커니즘은 그렇다 치고, 해결 방법은 크게 2가지가 있어요. (이것도 공식 문서에 있는 내용입니다. 위 링크 타고 들어가 보시면 금방 찾으실 거예요.) 1. Server Action에서 revalidatePath 또는 revalidateTag라는 함수를 호출한다. 2. useRouter() Hook의 router.refresh 함수를 호출한다. router.refresh는 내가 무효화하고자 하는 캐싱된 페이지 경로를 따로 명시할 수 없어서 현재 질문자님 상황에서는 적절해 보이지 않는 것 같아요. (현재 머물러있는 캐싱된 페이지 경로에 대한 무효화만 가능) 그래서 결론은 Server Action을 사용하시면 될 것 같은데요, 제가 첨부 드리는 예시 코드를 참고해서 작성해 보시면 좋을 것 같네요. 말 그대로 예시 코드라, revalidatePath 동작을 좀 더 강조해 보이기 위해 mutation은 Client Side에서 진행하고 revalidatePath만 Server Side(Server Action)에서 진행하는 형태로 짜봤는데요, 사실 가능하다면 mutation과 revalidatePath를 모두 Server Action에서 진행하는 게 좀 더 일반적인 형태긴 합니다. 이것도 Server Action에 대한 공식 문서를 한 번 참고해 보세요. (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// src/app/A/page.tsx
export const dynamic = 'force-dynamic';

export default async function Page() {
  const response = await fetch('API 경로');
  const data = await response.json();

  // 받아온 data를 보여준다.

  return <></>;
}

// src/app/B/page.tsx
'use client';

import { revalidatePathAction } from '../../actions/revalidatePathAction';

export default function Page() {
  const mutation = async () => {
    await fetch('API 경로', {
      method: 'POST',
      body: JSON.stringify({}),
    });
  };

  return (
    <button
      onClick={async () => {
        await mutation();

        revalidatePathAction('/B');
      }}
    >
      mutation하고 revalidatePathAction하기
    </button>
  );
}

// src/actions/revalidatePathAction.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function revalidatePathAction(page: string) {
  revalidatePath(page);
}

앱라우터 자체가 워낙 뒷단에서 여러가지 일을 마법같이 처리하고 있다보니 동작의 원인을 파악하기 어려운 경우가 많습니다. 따라서 정확한 개발환경과 시도한 상황을 설명해주셔야 도움을 드릴 수 있습니다. 예컨대 next.js는 개발환경과 프로덕션환경 간의 동작 차이도 큽니다. 지금 설명해주신 현상만 생각해보자면 next.js의 app router의 경우 그 구조상 너무 많은 데이터페칭 요청이 생기기 쉽다는 문제점이 있습니다. 예컨대 이런 상황을 생각할 수 있을거에요 A 페이지에서도 "우리백엔드/상품리스트" 라는 api 의 응답값이 필요한데 B 페이지에서도 똑같이 "우리백엔드/상품리스트" api의 응답값이 필요한 경우가 있겠죠? 이러한 경우 비효율적인 데이터페칭요청이 많이 생길 수 있다는 성능적인 위험을 가지게됩니다. 그래서 next.js의 app router는 자신들의 사용예시에 맞게 사용된 fetch 를 이용한 데이터페칭 요청에 대하여 그 결과를 인메모리 캐싱을 통하여 서버에 저장해두며 이러한 내부스토어 캐싱 옵션이 모든 요청에 대해 기본적으로 수행됩니다. 따라서 작성자님이 실제로 DB를 변경하셨더라도 실제로는 캐싱된 데이터를 보고 있기 때문에 이전 데이터를 보게되었을 가능성을 예상할 수 있습니다. 이러한 문제의 해결책은 당연하지만 내부스토어 캐싱 옵션을 사용하지 않는 것을 생각할 수 있는데요 사용하지 않는 옵션을 주시면 되겠습니다. 만약 그러한 작업을 이미 수행 하였는데도 안되시는 상황이라면 유감이네요.. 관련 이슈가 있는지 찾아보시고 없다면 한번 이슈로 올려보시면 될 것 같습니다.

저도 경험해본 적이 있는데요, 아마 Next.js의 특성인 캐싱때문인 것으로 알고 있습니다. Next.js에서는 기본적으로 api 라우트에 대한 Get 요청은 빌드시에 캐싱을 해두는 것으로 알고 있습니다. 따라서 fetch 함수를 사용하실 때 두 번째 인자로 { cache: 'no-store' }를 넣어보시는 방법으로 해결될 것으로 예상됩니다. 다음은 관련 문서입니다. https://nextjs.org/docs/app/api-reference/functions/fetch