getServerSideProps cache가 되지 않을 때
안녕하세요 강사님. getServerSideProps 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, getServerSideProps 페이지에서 로드된 html 문서의 헤더를 보면 캐시 정보가 나오지 않고 캐시가 되지 않는데 이유를 알 수 있을까요..?
import type { GetServerSideProps, NextPage } from 'next';
type Props = {
data: number;
};
const Example: NextPage<Props> = ({ data }) => {
return (
<main>
<h1>getServerSideProps Page!</h1>
<p>값: {data}</p>
</main>
);
};
export default Example;
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
res.setHeader(
'Cache-Control',
'public, s-maxage=5, stale-while-revalidate=10'
);
const delayInSeconds = 2;
const data = await new Promise((resolve) =>
setTimeout(() => resolve(Math.random()), delayInSeconds * 1000)
);
return {
props: { data },
};
};

답변 1
1
안녕하세요 질문 감사합니다!
네트워크 사진을 보니 로컬 환경에서 테스트를 하신 것 같습니다. getServerSideProps의 캐시 기능은 vercel로 배포를 한 후에 동작을 확인하실 수 있습니다. (해당 강의의 URL을 확인하시면 배포된 URL을 사용하고 있습니다. 중요한 부분이 아니라 설명을 생략했는데, 여기서 혼란이 생긴 것 같습니다.)
cache-control을 읽어 올바른 캐시 동작을 하기 위해서는 캐시 서버에서 해당 기능을 구현해야합니다. 일반적인 경우처럼 Vercel을 이용하여 배포하면 자동으로 캐시가 지원됩니다. 하지만 vercel을 이용하지 않고 직접 배포할 경우 redis 등의 캐시 서버를 통해 캐시 로직을 추가해줘야합니다.
관련 공식문서 올려드립니다! 초급 강의 범위 밖이라, 일단 넘어가셔도 괜찮습니다ㅎㅎ (https://nextjs.org/docs/pages/building-your-application/deploying/production-checklist#caching)
감사합니다 :)
API 라우터를 사용해야 하는 경우에 대해
1
150
1
키보드 어떤 거 사용하시나요
1
352
1
next.js 멀티플 런타임 관련해서 질문 올립니다..
1
358
2
아주 기초적인 질문입니다.
1
322
1
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
1
1170
2
수업을 듣다가 SSR에 관하여..
1
551
2
interface 와 type
1
376
1
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
1
384
1
onLoad함수 (script태그의 onLoad X)
1
426
1
dynamic에 대한 질문
1
447
1
SSR vs SSG
1
476
2
NoSSR 관련한 질문입니다:)
1
376
1
a tag 질문 !
1
327
2
8분 20초 배포 관련
1
324
2
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
0
2679
2
emotion styles 파일이 빌드시 경고로 뜹니다.
1
438
1
naver map 이 출력되지 않습니다.
1
481
1
페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?
1
264
2
Failed to load resource: the server responded with a status of 404 ()
1
1034
2
VSCode 익스텐션 궁금합니다.
1
357
1
상태관리 질문 있습니다!
1
450
1
swr에 대한 질문입니다. (용어 관련)
1
374
1
swr 질문입니다!
1
338
1
안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
1
681
2





