Next 서버 컴포넌트와 전역 상태관리

Next.js와 Zustand를 함께 사용하는 경우, 주요 고려사항은 서버 렌더링에 의해 데이터가 전역 상태에 저장되지 않는다는 점입니다. 이 때문에 클라이언트 측에서 필요한 데이터를 재요청해야하는 상황이 발생할 수 있습니다. 첫 번째 요소로 getServerSideProps 및 getStaticProps를 사용하여 초기 페이지 로드에 필요한 데이터를 가져오고, 이어서 클라이언트 측에서 나머지 데이터를 가져오도록 조정하는 것이 일반적인 접근법인데, 사용하시는 방식도 비슷해 보입니다. 다만, router.refresh()를 사용하여 서버 컴포넌트의 데이터를 강제로 새로고침하는 것은 매우 비효율적일 수 있습니다. 불필요한 네트워크 요청이 발생하고, 페이지 리렌더링을 초래하기 때문입니다. 대신, Zustand의 비동기 액션 기능을 활용하여 필요한 데이터만 업데이트할 수 있습니다. 다음과 같은 형태로 작성할 수 있습니다: ```javascript // Zustand Store import create from 'zustand' const useStore = create(set => ({ data: [], fetch: async () => { try { const res = await fetch('YOUR_API_ENDPOINT'); const data = await res.json(); set({ data }); } catch (error) { console.error(error); } } })) // Next.js Component import { useEffect } from 'react'; import useStore from '../store'; function MyComponent({ initialData }) { const { data, fetch } = useStore(); useEffect(() => { if (!data.length) fetch(); }, [data, fetch]); return ( // ...render your way... ); } MyComponent.getInitialProps = async () => { // Fetch initial data on server-side. }; ``` 이렇게 하면 필요한 데이터만 업데이트하고 불필요한 네트워크 요청을 줄일 수 있습니다. 가장 중요한 점은 적절하게 동기화하는 것입니다: 서버에서 가져온 데이터와 클라이언트에서 관리하는 상태가 일관적이어야 합니다. 나중에 서버 컴포넌트가 안정화되고 production-ready 해질 때 가능해진다면, Zustand 라이브러리로 전역 상태를 관리하는 대신 서버 컴포넌트를 사용하여 모든 데이터 조작을 처리하는 방법도 고려해 보시길 바랍니다. 이 방식으로 클라이언트-서버 간의 동기화 문제를 많이 완화할 수 있습니다.