Fix: 불필요한 API 호출

[Februaar]

Description

• 페이지 전환시 매번 불필요한 api 호출 발생

=> 1. 데이터 캐싱 2. 데이터 갱신 주기 설정 3. 페이지 전환시 데이터 유지 3가지 중 useState 훅으로 데이터를 캐싱하는 방법이 제일 적절해보임 => 하지만 이미 데이터를 useState로 담고있는데도 계속 불필요한 api 호출 발생되고 있었음 => 알고보니 network 탭 Cache-Control 헤더에 'no-cache' 'max-age=0' 값이 설정되어있어서 브라우저가 캐시를 무시하고 매번 서버에 새로운 데이터를 요청하는 것 => Cache-Control 헤더의 값은 클라이언트와 서버 간의 캐시 동작을 제어하는데 설정된 값에 따라서 브라우저가 캐시를 사용하거나 무시하도록 지시하는 것인데.. => 캐시를 사용하도록 하려면 'Cache-Control' 헤더 값에서 no-cache, no-store, max-age=0, must-revalidate를 제거하면 됨

To-Do

• [ ] Cache-Control 헤더 값 설정

ETC

[joshyeom]

시도해봤는데 그래도 시간이 똑같네요..

// next.config.js
...
 async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=3600",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

방법이 잘 못된걸까요 ?!

[Februaar]

시도해봤는데 그래도 시간이 똑같네요..

// next.config.js
...
 async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=3600",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

방법이 잘 못된걸까요 ?!

저는 불필요한 api 다중 호출을 줄이고자 'Cache-Control' 헤더를 조정해보자는 의견이었지만 이 설정만으로 데이터 호출 시간이 줄어들기를 기대할 순 있어도 근본적으로 해결되지 않는다면 다양한 측면에서 최적화 고려해봐야될 거 같아요 !!

[joshyeom]

시도해봤는데 그래도 시간이 똑같네요..

// next.config.js
...
 async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=3600",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

방법이 잘 못된걸까요 ?!

저는 불필요한 api 다중 호출을 줄이고자 'Cache-Control' 헤더를 조정해보자는 의견이었지만 이 설정만으로 데이터 호출 시간이 줄어들기를 기대할 순 있어도 근본적으로 해결되지 않는다면 다양한 측면에서 최적화 고려해봐야될 거 같아요 !!

SSG도 슬슬 써야될거같네여

[oinochoe]

해당 캐시 설정은 정적 컨텐츠에 관한 설정이고, API에 대한 응답처리는 다음과 같이 사용하셔야 합니다. @Februaar

export default function handler(req, res) {
    res.setHeader('Cache-Control', 'public, max-age=3600');
}