(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 공식 문서나 커뮤니티에서 서버 사이드 렌더링에 대한 자세한 정보를 찾아보시는 것을 추천드립니다. 감사합니다.
17강 강의에 목데이터 첨부파일이 없습니다.
1
13
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
13
1
에이전트 에러
0
18
1
커스텀 에이전트 생성하기
0
11
1
mission 09-01 을 수행할 수 없어요
0
20
1
클로드 코드 시작하기
0
22
1
Context API vs Zustand 그리고 Auth
0
34
2
스니펫이 이상해요
0
32
2
강의영상 버퍼링
1
39
4
에러핸들링- rootlayout에 관하여
0
29
2
DESIGN.md 파일이 잘못되었어요
1
44
1
react-fetch -2 (loading) 에러
0
43
2
리덕스 툴킷 맵다
0
33
1
VCP 누적 성과 저장 질문
0
51
2
useEffect return문
0
50
3
mcp 연결안됌
1
61
2
Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?
0
38
2
서울 이미지 10개에 대한 url 접근 불가
0
63
2
CLI gemini 로그인 안됨
1
399
2
실시간 조건 문자받기.
0
41
2
저는 Auto mode가 없어요
1
61
1
강의 초반에 생긴 질문
1
63
1
모든 컴포넌트를 클라이언트 컴포넌트로 했을 때
0
35
3
할 일 수정 질문
0
45
2