개발자

Next.js SSR CSR에서의 캐시 문제

2024년 08월 21일조회 71

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

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

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 08월 21일

Next.js의 SSR과 CSR 간의 캐시 문제는 복잡한 특성 때문에 발생하고, 여러분이 정확히 어떤 모듈이나 설정을 사용하느냐에 따라 이를 해결하는 방법이 다를 수 있습니다. 1. 페이지가 데이터를 미리 가져오는 Next.js의 getInitialProps 또는 getServerSideProps 메서드가 호출될 때, 해당 데이터는 서버에서 한 번만 가져온다음 클라이언트로 전달되고 캐시됩니다. 이 경우 클라이언트에서 페이지를 새로 고침하거나 다른 페이지로 이동 후 돌아오면 이전에 가져온 데이터가 캐시에 있어서 다시 가져오지 않습니다. 2. router.refresh()는 현재 페이지를 강제로 새로 고침하여 서버에서 새 데이터를 가져오도록 합니다. 그래서 상세 페이지에서 console.log가 제대로 찍히지 않았던 것은 아마 아직 캐시된 상태인 기존 데이터만 보여주었기 때문일 가능성이 큽니다. 3. no-cache 헤더와 force-dynamic 모드는 요청할 때 마다 항상 최신의 데이터를 받으려 시도합니다. 하지만 Next.js가 SSR 과정에서 컴포넌트 내부의 변화나 특정 조건을 검사하지 않는 한, 이전에 받아왔던 데이터를 계속해서 사용하게 됩니다. 따라서 console.log가 최초 접근 시에만 찍히고 그 이후에는 찍히지 않습니다. 해결책으로는 getInitialProps 또는 getServerSideProps에서 아이템의 수량이 변화하는지 감지하여 변경 시 마다 새로운 데이터를 fetch하거나, 클라이언트 쪽에서 해당 컴포넌트를 갱신해주는 방법 등을 고려해 볼 수 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!