Next.js 의 _layout.tsx 파일 내에서 server side 데이터를 활용할 방법이 있을까요 ?

Question

네비게이션 바에서 로그인, 로그아웃 상태를 구분해서 구현을 다르게 해주려고 합니다. 문제는 네비게이션 바 컴포넌트를 _layout.tsx 내에 구분했는데 여기서 getServerSideProps 를 사용할수 없더라고요. API 호출을 사용하면 해결되기는 하지만 getServerSideProps 를 사용할 때보다 느려서 사용하기 애매합니다. 혹시 다른 좋은 방법이 있을까요 ?

손정현 · Answer

안녕하세요!

혹시 Next.js의 버젼이 어떻게 되시나요? /app 디렉토리를 사용하시는건가요?
버전 13이상이시고 /app 디렉토리를 사용하고 계신다면 layout은 디폴트로 서버 컴포넌트여서 데이터 호출을 바로 하시면 될 것 같습니다.
- https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts

만약 /pages 디렉토리를 사용하고 계신다면 안타깝지만 클라이언트 사이드에서 API 호출을 해야하는것처럼 보이네요. 알고 계신 것처럼 서버사이드 데이터 페칭 기능이 없는 것 같네요. 레이아웃 자체는 단순 closure 함수라서 안에서 api를 호출하신다고해도 아마 함수가 생성되는 시점에는 실제 데이터가 없는 상태로 생성되지 않을까 싶습니다.
- https://nextjs.org/docs/basic-features/layouts#data-fetching

문서를 보다보니까 뭔가 getInitialProps로 시도해보면 되지 않을까 싶기도 하구요. 
- https://nextjs.org/docs/api-reference/data-fetching/get-initial-props

어떤  next 버전인지 알면 다른 분들이 답변하시는데 더 도움이 될 것 같습니다 :)