인프런 커뮤니티 질문&답변
작성한 질문수
2:34 RQProvider에 "use client"; 로 csr 선언?을 해주신 것 같은데 이런 형식의 구조라면 SSR이나 SSG 적용에는 문제가 없을까요?
작성
·
932
·
수정됨
0
안녕하세요 제로초님.
리액트 쿼리를 도입해보려고 할 때 마침
제로초님 강좌가 올라와서 참고하고 있습니다!
근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로
데이터를 가져오게끔 하려고 하고 있거든요
강의에서 ssr로 데이터를 가져오는데
그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!!
(제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
퀴즈
MSW(Mock Service Worker)를 사용하는 주된 목적은 무엇일까요?
백엔드 서버 코드를 작성하기 위해
API 요청을 가로채 가짜 응답을 주기 위해
데이터베이스 스키마를 설계하기 위해
UI 컴포넌트를 스타일링하기 위해
답변 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