inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

주소에 해시가 들어가면 문제가 됩니다(encodeURIComponent)

cache 질문

127

심현석

작성한 질문수 13

0

이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?

react next.js react-query next-auth msw

답변 2

0

제로초(조현영)

네, data cache에서 캐시를 꺼내오려면 force-cache이고

매번 새로운 데이터를 받아오려면 no-store입니다.

cache 옵션을 넣지 않으면 해당 페이지에서 dynamic api를 사용하고 있는 경우에만 매번 데이터를 새로 가져옵니다.

0

심현석

한 가지 궁금한점이 있습니다
force-cache가 캐시가 있는 경우 데이터를 재요청하지 않는다라고 알고있는데 그럼 새로운 데이터가 필요없는 경우 (이미지 같은 정적요소) 들을 가져오는 경우에만 설정하는 걸까요 ?

0

제로초(조현영)

아뇨 데이터캐시를 따르는 것이라 데이터캐시를 갱신(revalidate류)하면 새로운 데이터를 가져올 수 있습니다. 영구적인 데이터용만은 아닙니다. 서버쪽 캐시를 수동으로 컨트롤한다고 생각하시면 편하실겁니다.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 심현석님.

fetch 메서드의 cache 옵션에 관해 말씀드리겠습니다. cache: 'force-cache'cache: 'no-store'은 서로 다른 캐싱 전략을 취합니다.

  • cache: 'force-cache': 이 옵션은 모든 네트워크 요청에 대해 캐시된 데이터를 사용하게 합니다. 즉, 서버에 요청을 보내지 않고, 캐시된 데이터가 있는 경우 이를 바로 활용합니다. 이는 주로 캐시된 데이터를 우선적으로 활용하여 성능을 높이고 싶을 때 사용됩니다.

  • cache: 'no-store': 이 옵션은 캐시를 사용하지 않고, 항상 서버에서 새로운 데이터를 가져옵니다. 서버의 최신 데이터를 즉시 반영하고 싶을 때 적합한 설정입니다.

따라서, 격변하는 데이터를 수신하는 경우나 항상 최신 데이터가 필요한 경우는 cache: 'no-store'을 사용하는 것이 좋습니다. 하지만, 성능 최적화와 네트워크 요청 수를 줄이려는 경우에는 cache: 'force-cache'를 사용할 수 있습니다.

관련해서 기존에 유사한 상황을 다룬 답변을 참고하시면 도움이 될 수 있습니다. 여기에는 React Query와 Next.js를 활용하여 캐시와 최신 데이터를 관리하는 다양한 방법들이 설명되어 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

캡처링부분 질문있습니다.

0

76

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

111

2

css 라이브러리 추천 부탁드립니다

0

141

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

133

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

172

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

110

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

132

2

next.js 에서 로그인에 관하여

0

139

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

98

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

230

2

fetch 캐싱과 revalidate 관련

0

85

2