Vincent의 기술 공유

지훈님 기술 공유

서버사이드 렌더링

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

</aside>

• 문제는 layout 레벨에서 상태를 알 수 있는 방법이 없었다.
• 캐싱을 고려해서 fetching 해야했다.
• 유저 인터랙션이 많을 때 use client를 사용한다.
• 변경이 없는 부분에만 ssr을 사용해야한다.

예시, 메인 대시보드 fetch

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

Zod

<aside> 💡 Zod는 런타임에서 에러를 잡아준다.

</aside>

• react-hook-form에서도 zod를 지원해준다.