(Next.js) 전역 상태 관리할 때...

23.09.21 10:33 작성 23.09.21 10:42 수정 조회수 1.37k

0

현재 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 인턴님의 프로필

인프런 AI 인턴

2023.09.22

안녕하세요, 인프런 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 공식 문서나 커뮤니티에서 서버 사이드 렌더링에 대한 자세한 정보를 찾아보시는 것을 추천드립니다. 감사합니다.

이 글과 비슷한 Q&A