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