75일차 TIL( cs - study / css - 조건부 스타일링)

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.

• CSR은 웹 애플리케이션에서 모든 HTML, CSS 및 JavaScript 코드를 브라우저로 다운로드하고 실행합니다. 초기에는 빈 페이지가 로드되며, 브라우저에서 JavaScript 코드가 실행되면 서버에서 데이터를 요청하고, 데이터를 받아와서 동적으로 화면에 렌더링 하게 됨 장점으로는
• 검색 엔진 최적화 (SEO) 어려움: 초기 페이지에는 적은 내용이 있어 검색 엔진이 콘텐츠를 인덱싱하기 어렵다.
• 초기 렌더링 대기 시간: 브라우저는 JavaScript 코드를 다운로드하고 실행해야 하므로 초기 로딩 시간이 길어질 수 있다.
• 브라우저 및 네트워크 의존성: 사용자의 브라우저 및 네트워크 속도에 따라 성능이 달라질 수 있다.

서버 사이드 렌더링 (SSR):장점으로는

• SEO 최적화: 검색 엔진은 초기에 완전한 HTML을 볼 수 있으므로 SEO에 유리하다.
• 초기 렌더링 속도: 사용자는 이미 완성된 페이지를 볼 수 있으므로 초기 로딩 속도가 빠르다.
• 브라우저 독립성: 클라이언트의 브라우저 성능에 덜 의존적.

단점으로는

• 빠른 페이지 로딩: 초기 페이지 로드가 빠르며, 사용자는 필요한 데이터만 요청할 수 있다.
• 뛰어난 사용자 경험: 웹 애플리케이션은 브라우저에서 동적으로 렌더링되므로 사용자 경험이 부드럽다.
• 클라이언트 측 캐싱: 브라우저는 CSR에서 자주 사용되는 자원을 캐싱하여 성능을 향상시킬 수 있다.

단점은

• 서버 부하: 서버는 매 요청마다 HTML을 생성해야 하므로 부하가 발생할 수 있다.
• 덜 부드러운 사용자 경험: 초기 페이지 로딩 후에도 JavaScript가 로드되어야 하므로 사용자 경험이 CSR보다 덜 부드럽게 느껴질 수 있다.

• SSR은 서버에서 초기 HTML을 생성하여 클라이언트에게 전송하며 브라우저가 페이지를 로드하면 이미 완성된 HTML을 볼 수 있으며, 이후에 JavaScript를 다운로드하고 실행하여 페이지를 동적으로 업데이트할 수 있다.
  
  
  
• 구독자 목록이 4명 이상이 넘어간다면 리스트 
  <UserContainer>
           // 0명이면 "아직 구독한 사람이 없어요 !"문구를 명시
                {sublistData?.length === 0 ? (
                  <div className="none-subs">아직 구독한 사람이 없어요 !</div>
                ) : (
                  sublistData?.map((sub, index) => {
                    return (
                      <div key={sub.id} onClick={() => naviSubPage(sub.subscribe_to)}>
                        <UserBox isFirst={index === 0 && sublistData.length >= 4}>
                       // sublistData 배열안에 담긴 객체가 4개 이상이면, className에 + isFirst
                          <Img
                            src={`${process.env.REACT_APP_SUPABASE_STORAGE_URL}${sub.to.avatar_url}`}
                            alt="User Avatar"
                          />
                          <Name>
                            팝업메이트 <NameLine>{sub.to.name}</NameLine> 님
                          </Name>
                        </UserBox>
                      </div>
                    );
                  })
                )}
              </UserContainer>

const UserBox = styled.div<{ isFirst: boolean }>`
  padding: 10px;
  margin: 10px;
  border: 3px solid var(--fifth-color);
  background-color: var(--fourth-color);
  border-radius: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, font-weight 0.3s ease;
  ${(props) =>
    props.isFirst &&
    `
    padding-top: 108px;
  `}
  &:hover {
    border: 3px solid var(--primary-color);
    background-color: var(--sixth-color);
    font-weight: 600;
  }

  &:active {
    transform: scale(0.98);
  }
`;