(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 공식 문서나 커뮤니티에서 서버 사이드 렌더링에 대한 자세한 정보를 찾아보시는 것을 추천드립니다. 감사합니다.
PROJECT_STRUCTURE.md 파일 공유좀 해주세요
0
13
2
노션 사용권한 불편합니다.
0
11
2
cursor ai가 업데이트 되서 ui가 바뀌었는데 반영은 안될까요?
0
9
1
노션 사용 권한 없음
0
17
2
Notion에서 이 페이지에 대한 사용 권한 없음
0
18
2
실습 중 codex를 클로드코드로 대체 가능한지 문의
1
19
2
VCP 시그널 상태 추가 스크립트 에서 return_pct 조건
0
28
2
캐쉬가 업데이트 안됩니다.
0
29
2
노션 사용권한 요청
0
37
2
시각화_가이드 자료는?
0
38
2
거래대금에 대한 필터링 문제
0
38
1
41강에 vcp 결과가 다르게 나옵니다.
0
31
2
뉴스 검색에서 날짜 필터링
0
36
2
scorer.py 에 뉴스/재료 점수 부분이 없어요.
0
35
2
제가 만든 파일로 강의 수강을 이어가도 되나요?
0
38
2
14강은 언제 올라올까요??
0
48
2
강의 내 언급된 링크 문의
0
41
1
수업자료 및 단톡방 접속관련
0
34
1
Part03 프롬프트 14 기간 조정(횡보 후 돌파) 입력 시 claude에서 수정안 발생
0
42
1
best of best 점수 합산
0
52
1
about us 소리안나와요
1
39
2
import {} 중괄호 차이점
0
38
2
질문이 있습니다.
0
64
2
안녕하세요? 섹션14는 강의가 언제부터 올라오나요? 너무나 궁금하고 기대가 됩니다~ ^^
0
62
2