next.js app-router에서 fetch revalidate 옵션을 주었을 때 데이터가 갱신되지 않는 현상

현재 서버에서 하루 단위로 DB데이터를 업데이트하고 있습니다. 거기에 맞춰 프론트단에서도 하루 단위로 갱신된 데이터를 보여주기 위해 api fetch옵션인 `{ next: {revadliate : 36000} }` 을 설정해 두었습니다. 그런데 revalidate로 설정한 시간이 지나도 화면에 나타나는 데이터가 갱신되지 않아요... 개발 환경에선 업데이트 된 데이터가 나오다가도 배포 페이지에선 이전 데이터가 나오는거 같아요. (배포는 aws로 했습니다) 서버 db 데이터는 잘 업데이트 되고있는걸 확인했습니다. 혼자서 자료를 아무리 찾아봐도 원인과 해결법을 모르겠어서 도움 요청합니다ㅠㅠ fetch 코드와 fetch를 호출하는 코드도 함께 첨부합니다.

1// fetch코드
2import { APIResponse } from "@/src/types/APIResponse";
3import { objectToQueryString } from "@/src/utils/common/objectController";
4import { APIAdapter } from "./adapter";
5
6export class Fetch implements APIAdapter {
7  private fetchOptions: RequestInit;
8
9  // fetch 초기설정
10  constructor(cookie?: Record<string, any>) {
11    this.fetchOptions = {
12      method: "GET",
13      headers: {
14        "Content-Type": "application/json",
15        Cookie: cookie ? objectToQueryString(cookie, ";") : "",
16      },
17      credentials: "include",
18      body: null,
19      next: {
20        revalidate: 0,
21      },
22    };
23  }
24
25...
26
27  // fetch next-revalidate 옵션 설정
28  setRevalidate(revalidate: number | false | undefined): void {
29    this.fetchOptions.next = {
30      ...this.fetchOptions.next,
31      revalidate,
32    };
33  }
34
35  // fetch함수 실행
36  async fetching<T>(url: string): Promise<APIResponse<T>> {
37    try {
38      const rs = await fetch(url, this.fetchOptions);
39      const data = await rs.json();
40
41      return {
42        ...data,
43        status: rs.status,
44      };
45    } catch (error) {
46      return {
47        result: "fail",
48        status: 500,
49        message: "알 수 없는 에러 발생",
50        payload: {} as T,
51      };
52    }
53  }
54}
55
56
57
58// fetch 사용하는 코드 - api를 호출하고 이벤트 정보를 가져
59export async function getRecentEvents(): Promise<
60  APIResponse<EventThumbnail[]>
61> {
62  // fetchAdapter 인스턴스 생성
63  const apiFetch = new Fetch(); 
64  // revalidate 옵션 설정
65  apiFetch.setRevalidate(36000);
66  // fetch 실행
67  const rs = await apiFetch.fetching<MainEventsPayload>(`${url}/latest`);
68  // 데이터 포맷 변경
69  const data = rs?.payload.events.rows.map((event: Event) => ({
70    thumbnail: event.thumbnail,
71    id: event.id,
72    title: event.title,
73  }));
74
75  return {
76    ...rs,
77    payload: data,
78  };
79}

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문