(Next.js) 전역 상태 관리할 때...
현재 Next 13 APP라우팅 방식으로 프로젝트를 하고 있습니다.
프로젝트에서 전역상태관리를 위해서 ContextAPI를 이용하고
Provider를 아래와 같은 방법으로 적용을 시켜줬습니다.
(layout.js)
return (
<html>
<body>
<Provider>
{children}
</Provider>
</body>
</html>
)(Provider.js)
'use client'
//생략
export default function Provider({children}) {
return (
<ContextProviber>
{children}
</ContextProviber>
)
}이렇게 Provider로 감싸주었더니 'use client'를 사용하여 CSR환경에서 작동해야 한다고 하더라구요. 그래서 "use client"까지 적용했는데
이렇게 'use client'로 작성된 component로 감싸면 이 아래오는 모든 코드가 SCR로 적용되는 건가요?
만약 이게 맞다면 SSR의 장점을 전혀 살리지 못하는 것인데 어떻게 해결할 수 있나요?
답변 1
1
안녕하세요, 인프런 AI 인턴이에요. 전역 상태 관리를 위해 Context API와 Provider를 사용하고자 하는데, “use client”를 사용하여 CSR 환경에서 작동해야 한다는 문제가 발생했다는 말씀이신가요?
“use client”는 Next.js에서 서버 사이드 렌더링(SSR)을 사용하지 않고 클라이언트 사이드 렌더링(CSR)을 사용하기 위한 방법 중 하나입니다. 따라서, “use client”로 작성된 컴포넌트를 사용하면 해당 컴포넌트와 그 하위에 존재하는 모든 코드가 CSR로 동작하게 됩니다.
이렇게 하면 CSR의 장점을 사용할 수 있지만, SSR의 장점을 살리지 못하는 문제가 있을 수 있습니다. SSR의 장점을 살리기 위해서는 해당 컴포넌트를 서버에서 렌더링하여 초기 상태를 설정해주어야 합니다. Next.js에서는 getStaticProps 또는 getServerSideProps 함수를 사용하여 서버 사이드 렌더링을 구현할 수 있습니다.
따라서, 전역 상태를 관리하는 컴포넌트를 “use client”로 작성하면 CSR로 동작하게 되지만, 서버 사이드 렌더링을 구현하여 SSR의 장점을 살릴 수 있도록 getStaticProps 또는 getServerSideProps 함수를 사용하여 초기 상태를 설정해주어야 합니다.
추가적인 도움이 필요하시다면, Next.js 공식 문서나 커뮤니티에서 서버 사이드 렌더링에 대한 자세한 정보를 찾아보시는 것을 추천드립니다. 감사합니다.
part2강의 문의사항입니다.
0
11
2
쿠폰 문의 드립니다.
0
12
2
현재 진행중인 강의에 마케팅 요소를 녹이는 방법
0
31
1
데브옵스에 관련된 지식
1
39
0
케이테스트 서버 운영 방법
2
35
0
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
18
1
2026.04에 추가된 강의 시청 불가
0
18
1
데스크톱과 노트북 연결
0
22
1
노션 : 파트3번 링크와 권한 , 파트4번 권한요청, 파트 5번도 미리 요청 드립니다.
0
25
4
antigravity 대신 cursor를 활용해도 되나요?
0
25
1
node.js 설치 관련 질문 드립니다
0
18
1
뉴스 검색 분류 한도초과
0
36
2
완성자료
0
25
2
Cursor 설정
0
24
1
Node 관련 질문입니다
0
26
3
강의 내용속 커서 버젼하고 현재 커서 버젼이 다른가요?
0
26
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
32
2
노션 링크
0
52
3
노션 권한요청하였습니다 언제쯤 볼수있나요
0
44
2
추가 강의 업데이트 일정 문의
0
24
1
프롬프트, 스킬, sub-agent
0
29
1
모달 관련 질문
0
32
3
5번 강의 1분까지 완료 후 오류가 뜹니다
0
33
2
구글 소셜 로그인 후 로그인 시 구글에러
0
25
2