inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

QueryClientProvider의 use client관련해서 궁금한게 있습니다

해결된 질문

283

kraf

작성한 질문수 14

0

안녕하세요. Next에서 Tanstack-query 를 사용하실 때 궁금한게 있어서 질문드립니다.

QueryClientProvider를 생성하실 때 아래와 같이 진행하신 다음에 layout.tsx 에서 감싸주고 있는데,

QueryClientProvider에 use client를 사용하게 되면 결국 모든 하위 컴포넌트가 클라이언트 컴포넌트가 되는게 아닌가요?

즉, layout.tsx 부터 모든 컴포넌트가 전부 클라이언트 컴포넌트로 사용되는게 맞는건가요...?

'use client';

import React, { ReactNode, useState } from 'react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function RQProvider({ children }: { children: ReactNode }) {
  const [client] = useState(
    new QueryClient({
      defaultOptions: {
        // react-query 전역 설정
        queries: {
          refetchOnWindowFocus: false,
          retryOnMount: true,
          refetchOnReconnect: false,
          retry: false,
        },
      },
    }),
  );

  return (
    <QueryClientProvider client={client}>
      {children}
      {/*  개발 모드일때만 데브툴 사용*/}
      <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} />
    </QueryClientProvider>
  );
}

export default RQProvider;

 

next.js

답변 2

0

제로초(조현영)

아뇨 쿼리클라이언트 컴포넌트 안에서 import한 것(ReactQueryDevtools)만 클라이언트컴포넌트가 되고, 서버클라이언트에서 props(children)으로 넘긴 것은 그대로 서버컴포넌트가 됩니다

0

kraf

혹시 마지막줄에 "서버클라이언트에서" 라고 말씀하신게 어느 부분을 말씀하신건가요? 서버 컴포넌트인가요?

0

제로초(조현영)

아, 서버컴포넌트입니다

0

kraf

아하 그렇네요, 말씀해주신 것처럼 클라이언트 컴포넌트의 {children}으로 서버 컴포넌트를 사용하게 되면 서버 컴포넌트 그대로 사용할 수 있다고 말씀하셨는데 그 원리가 여기에서도 적용 되는 거였군요 감사합니다!

0

인프런 AI 인턴

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

Next.js에서 use client를 사용하면, 해당 파일 내의 모든 컴포넌트가 클라이언트 측에서 렌더링됩니다. QueryClientProvider 역시 이러한 파일 안에서 정의되고, 클라이언트 측에서 작동하게 됩니다. 따라서, 이와 함께 사용되는 모든 하위 컴포넌트도 클라이언트에서 렌더링됩니다.

하지만, Next.js의 SSR(서버 사이드 렌더링) 특성을 활용하고 싶다면, 클라이언트와 서버 컴포넌트를 적절히 나누어 사용하는 것이 중요합니다. 그러므로, use client를 반드시 필요한 컴포넌트에만 적용하여 클라이언트에서만 동작하도록 하는 것이 좋습니다. layout.tsx 이하 모든 컴포넌트가 클라이언트 컴포넌트로 간주될 수 있으니, SSR을 활용하고 싶다면 이 점 유의하시기 바랍니다.

다음의 유사한 질문을 참고하시면 도움이 될 것 같습니다:
- QueryClientProvider 하위의 컨포넌트는 모두 Client component인가요?

링크의 답변을 통해 use client를 사용할 경우의 컴포넌트 관리 방법에 대한 추가 설명을 확인할 수 있습니다. 이 방법을 통해 프로젝트의 특성에 따라 컴포넌트를 클라이언트 또는 서버에서 적절히 분리하여 사용하는 전략을 고려해 보세요.

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

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

0

115

2

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

0

146

2

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

0

120

1

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

0

141

2

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

0

182

2

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

0

161

1

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

0

131

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

196

1

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

0

208

3

폴링이 필요없는 이유

0

127

2

next Request Memoization과 react cache

0

132

2

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

0

101

2

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

0

194

2

프레임워크 여론 파악법

0

146

2

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

0

135

2

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

0

122

2

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

0

91

2

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

0

160

2

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

0

158

1

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

0

118

2

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

0

123

2

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

0

101

2

vanilla-extract 못찾는 문제

0

251

2

fetch 캐싱과 revalidate 관련

0

110

2