팀에서 프로젝트를 진행하던 중 사용하고 있던 스타일링 라이브러리인 twin.macro가 Next.js 서버 컴포넌트에서 사용이 불가한 것을 확인하고, 해당 문제를 해결하면서 SSR , CSR , RSC , RCC 개념에 대해 제대로 짚고 넘어가보기로 했다. 우선 일반적인 클라이언트 사이드 렌더링에서는CSS / JS 파일이나 이미지같은 파일의 크기가 클때 , 이런 모든 파일들이 모두 로드 될때까지프론트 - 백엔드 API 요청이 계속해서 대기 상태에 머무르게 된다. 이 현상을 워터폴 현상이라 한다. 워터폴현상이 생길시에 - 로딩 지연: 각 요청이 이전 요청의 완료를 기다려야 하므로, 전체 페이지의 로딩 시간이 길어집니다.- 사용자 경험 저하: 페이지의 주요 콘텐츠가 늦게 나타나거나, 사용자가 상호작용을 시..