2:34 RQProvider에 "use client"; 로 csr 선언?을 해주신 것 같은데 이런 형식의 구조라면 SSR이나 SSG 적용에는 문제가 없을까요?
934
작성한 질문수 1
안녕하세요 제로초님.
리액트 쿼리를 도입해보려고 할 때 마침
제로초님 강좌가 올라와서 참고하고 있습니다!
근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로
데이터를 가져오게끔 하려고 하고 있거든요
강의에서 ssr로 데이터를 가져오는데
그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!!
(제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
답변 1
2
강의에서 설명드리는 내용인데, 'use client'(클라이언트 컴포넌트)는 ssr과 아무 관련이 없습니다. 서버/클라이언트 컴포넌트 전부 ssr 됩니다. 예전에 모든 컴포넌트가 클라이언트 컴포넌트(리액트 17이하)이던 시절에도 SSR은 잘 됐습니다.
서버 컴포넌트는 서버 데이터를 좀 더 빠르게 가져오는 점, 데이터 캐시, 서버 모듈 분리가 특징일 뿐입니다.
논외로, 사실 화면을 SSR하는 것은 큰 의미는 없습니다. 오히려 서버 자원 낭비이고요. head에 meta 태그만 SSR 잘 되게 심어도 되긴 합니다. Next.js에서도 metadata를 화면 ssr보다 더 중요하게 생각합니다.
0
답변 감사합니다! 달아주신 거 보고 문서에 나왔는데 놓쳤구나.. 싶어서 보는데
리액트나 넥스트 쪽 공식문서에서는 클라이언트 컴포넌트와 ssr과는 관계가 없다라고 따로 적어둔 건 없는 것 같은데 그냥 당연하게 알고있는 상식?! 같은 건가요?
저는 처음 알게돼서 어떻게 그런 걸 알 수 있는지..
혹은 문서에 버젓이 나와있는데 제가 부분별로만 봐서 놓친 걸까요 ㅠ
요즘 공부 방법에 고민이 많아서 재질문을 드립니다.ㅠㅠ
https://react.dev/reference/react/use-client
https://nextjs.org/docs/app/building-your-application/rendering/client-components
0
안녕하세요 제로초님! 리액트 쿼리 사용, 서버 컴포넌트에 대해 추가적으로 질문이 있어 답변을 달게 되었습니다!
현재 리액트 쿼리를 적용해서 루트 레이아웃을 RQProvider로 감싼 상태입니다.
제 프로젝트 app/layout.tsx를 보여드리자면 이렇습니다. AuthProvider에서 리액트 쿼리를 사용하기에 RQProvider로 감쌌습니다. AuthProvider에서는 로그인 상태를 컨트롤 합니다!
<html>
<body>
<RQProvider>
<AuthProvider>
{children}
</AuthProvider>
</RQProvider>
</body>
</html>루트 레이아웃을 리액트 쿼리 프로바이더로 감싸면 왜 좋지 않을까요?
기존 서버 컴포넌트들이 RQProvider로 감싸짐으로써 모두 클라이언트 컴포넌트가 되어버리는 걸까요? 아래 답변글 중에서 레이아웃은 서버컴포넌트로 놔두는 게 좋습니다 라고 달아주신 답변을 보고 궁금해졌습니다. (링크 첨부)
그럼 제 프로젝트는 이제 서버 컴포넌트를 사용하지 못하게 되는 걸까요? 제로초님이 알려주신 답변 덕에 클라이언트 컴포넌트여도 데이터 프리패치 ssr, ssg는 이용할 수 있다는 것은 알게 되었습니다!
또 아래에 달아주신 답변에 화면을 SSR하는 것은 큰 의미는 없습니다. 오히려 서버 자원 낭비이고요. 이 질문에 대해서... 제 웹 페이지가 빠르게 메인을 보여줘야하고 새로 고침했을때마다 데이터 패치받기 전에 빈 공간이 뜨는 걸 방지하고자 SSR을 쓰려는 것인데 그 이유로 메인에 있는 모든 요소를 SSR로 가져오는 건 효율이 많이 안 좋은걸까요?
0
Provider류는 그 아래 컴포넌트 전체에 영향을 미칩니다. 전역에 영향을 미치는 건 최소화하는 게 좋습니다. 나중에 다른 프로바이더와 충돌이 날 수도 있고요.
서버컴포넌트냐 아니냐는 위에 "use client"를 쓰냐의 차이일 뿐이지 프로바이더 사용과는 아무 관련이 없습니다.
그 용도라면 첫 화면에 보이는(스크롤 내려야 보이는 부분 말고, above fold라고 합니다) 부분만 ssr 하셔도 됩니다. 나머지는 따로 csr 하고요. 참고로 전체를 csr하는 게 ssr 하는 것보다 체감상 더 빨라 보일 수도 있습니다.
캡처링부분 질문있습니다.
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
138
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