대시보드에서의 서버사이드 렌더링 방식

대시보드에서 SSR을 하기전에 클라이언트 상태가 결정되어야 SSR을 해야하는 상황,

이런경우 CSR 을 하는것이 일반적이라는 답변을 받음

하지만 유저가 선택하지 않아도 클라이언트 상태는 결정될 수 있음 ⇒ SSR을 최대한 적용하는것이 nextjs가 권장하는 패턴이기에 시도해보기로 함

<aside> 💡 서버에서 클라이언트 상태를 알아야 한다.

</aside>

• 문제는 layout 레벨에서 상태를 알 수 있는 방법이 없었다.
• 대표호실같은 서버쪽 데이터와 클라이언트에서 유저가 선택한 데이터를 서버 전역으로 공유할 방법이 있을까?
• 캐싱을 고려해서 fetching 해야했다.
• 유저 인터랙션이 많을 때 use client를 사용한다.
• 변경이 없는 부분에만 ssr을 사용해야한다.

예시, 메인 대시보드 fetch

• 서버에서 받아온 ‘빌딩명’이 있어야 메인 대시보드를 불러올 수 있었다.
• 이에 따라 ssr에서는 빌딩명만 가져온 뒤 클라이언트 사이드에서 re-fetch 해줘야했다.
• 또한 빌딩명을 query string에 넣어줘야했다.
• fetching하고 query string 설정한다음 re-fetch 하게 구현해두었다.
• 빌딩명에 영향을 받지 않는 로직들에 대해서는 최대한 ssr을 적용했다.
• 다음에는 캐싱을 통해서 re-fetch를 최대한 줄이고, useMemo를 통해서 리렌더링을 줄일 수 있다고 생각한다.