레이아웃 SSR 이슈 해결

[Likilee]

No description provided.

[Yenowme]

그리드 라이브러리의 SSR 미지원에 따른 해결방법

1. SEO를 속이기

CSR이 되기 전에 자체적으로 비슷한 레이아웃을 제작해서 HTML에 띄워보면 어떨까?

• 단점
  • 레이아웃 쉬프트 현상이 매우 크게 발생하며 사용자 경험이 매우 떨어질 수 있음

2. 네이티브 CSS속성 사용해보기

아직 지원되는 브라우저가 거의 없다. 파이어폭스만 특정 브라우저에서만 가능할지도.

3. 스켈레톤을 추가하기

위와 비슷한 느낌으로, 핀터레스트처럼 첫번째 줄만 렌더를 해서 HTML로 전달 후 CSR로 나머지 줄을 렌더하는 방법

• SSG블로그를 제공하는 서비스에. 로딩(깜빡임)이 있다는게 부자연스러움

4. 디자인 수정..

• SSR이 지원되되록 정적인 그리드를 제공하는 디자인으로 시안 수정

[JaeSeoKim]

해결 방안

완벽하게 동적인 masonry Card는 SSR 특성상 불가능 하다고 판단하여서, description과 cover 이미지를 기준으로 여러가지 높이 preset를 정의 하여 grid-row-end 를 활용하여 masonry grid 를 style에 주입하는 것으로 구현 예정

참고 코드

[Yenowme]

TODO

• 라이브러리 제거
• 3가지 정도의 높이를 가지는 카드 컴포넌트 variation 디자인
  • 사진이 있는 컴포넌트 (l)
  • 글자만 있는 컴포넌트 (m)
  • 글자만 있는 컴포넌트 (s)
• 레이아웃 연산

[JaeSeoKim]

정적 HTML 및 CSS 예시

[JaeSeoKim]

카드에 태그가 추가가 되어야 하는데 이때에는 어떻게 처리할 예정인가요?

[Yenowme]

카드에 태그가 추가가 되어야 하는데 이때에는 어떻게 처리할 예정인가요?

태그의 경우에는 한줄로만 처리해야 할 것 같습니다! 태그 컴포넌트 머지되면 수정해서 올리겠습니다