레이아웃 SSR 이슈 해결

Yenowme commented 2 years ago

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

1. SEO를 속이기

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

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

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

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

3. 스켈레톤을 추가하기

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

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

4. 디자인 수정..

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

JaeSeoKim commented 2 years ago

해결 방안

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

참고 코드

Yenowme commented 2 years ago

TODO

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

JaeSeoKim commented 2 years ago

정적 HTML 및 CSS 예시

JaeSeoKim commented 2 years ago

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

Yenowme commented 2 years ago

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

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

CraBft / craft-blog