nextjs 전역 상태관리 질문

Question

안녕하세요 nextjs(App router 사용)로 프로젝트를 진행하고 있는데, 전역상태를 정의하기 위해서 zustand를 사용하려고 하고 생각중입니다.

전역 상태를 정의하기 위해서는

1. 가장 root가 되는 layout.tsx에 provider를 불러와 감싸주어, 전역적으로 참조할 수 있도록 하는 것
2. persist middleware을 사용해서 LocalStorage에 저장하는 방식으로 상태를 관리하는 것

이 정도 두 가지가 있는 것 같은데, 질문은

1. 만약 1번 방법을 사용한다면 client component로 선언한 custom provider로 자식 컴포넌트를 감싸게 될텐데, 그러면 상태가 변경됨에 따라 하위 컴포넌트들(server, client 상관없이)이 모두 리렌더링 되는 것인가요? 만약 그렇게 된다면 SSR의 의미가 사라지는 것 아닌가요?

2. 일반적으로 nextjs에서는 전역 상태를 어떤 식으로 관리하나요?

입니다. 감사합니다!

Ed · Accepted Answer

우선 app 라우터를 사용하고 계신거면 SSR이 아니라 server component를 사용하는 것이므로 차이점을 한 번 확인하시는게 좋을 거 같습니다. 그리고 전역변수라함은 일반적으로 클라이언트 사이드의 상태관리에 관한 이야기이므로 SSR이나 서버컴포넌트와는 이를 분리하여 생각하서야 합니다. 그리고 SSR, 서버컴포넌트 모두 처음 랜더링 시에 이점이 있는 것이지 이후의 리랜더링을 고려하는 것이 아닙니다. 1번의 경우 기본적으로 전역변수를 사용하는 컴포넌트가 리랜더링이 일어나면 그 하위 컴포넌트의 리랜더링을 막을수는 없습니다. 2번의 경우는 작성자님이 언급해주신 zustand도 많이 쓰이고 rtk, mobx정도가 주로 쓰입니다.

1번의 경우 기본적으로 전역변수를 사용하는 컴포넌트가 리랜더링이 일어나면 그 하위 컴포넌트의 리랜더링을 막을수는 없습니다.

2번의 경우는 작성자님이 언급해주신 zustand도 많이 쓰이고 rtk, mobx정도가 주로 쓰입니다.