더줄께 프로젝트를 리팩토링을 진행하던 도중 메인 페이지에서의 이슈를 발견하였다.
1. 케러셀 부분에서 불필요한 로딩 처리로 인해 CLS 점수가 좋지 않았다.
2. 분명 SSR을 적용했는데 초기 로딩이 느리고 서버에서 HTML을 가져오지 못해 미리보기에 나오지 않았다.
1. CLS (Cumulative Layout Shift) 문제 해결
- 문제: 페이지 내에서 레이아웃이 변경되는 문제(CLS)가 발생했음. 이는 성능 분석을 통해 확인되었습니다.
- 해결: 특히 캐러셀(이미지 슬라이드 등)에서 로딩 처리를 따로 해주고 있었기 때문에, 이 부분을 SSR에서 이미 처리하고 있으므로 추가적으로 페이지 내에서 로딩 처리를 반복할 필요가 없다고 판단하였습니다.
- 변경 사항: 불필요한 로딩 처리를 제거함으로써 레이아웃 쉬프트 문제를 해결했고, 페이지의 안정성과 성능이 개선되었습니다.
- 의미: SSR을 사용하여 초기 페이지 로딩 시 불필요한 재로딩을 줄였고, 레이아웃이 불필요하게 변경되는 문제를 해결하여 사용자의 경험을 개선했습니다.
2. SSR 적용 후 초기 로딩 문제 해결
- 문제: SSR(Server-Side Rendering)을 적용했음에도 불구하고 초기 로딩이 느리고, 서버에서 HTML을 가져오지 못하는 문제가 발생했습니다. 이로 인해 미리보기 화면에서도 콘텐츠가 표시되지 않았습니다.
- 원인 분석:
CustomNotice와 AllNotices 컴포넌트 내부에서 searchParams를 사용하고 있었으며, 이로 인해 use client 환경이 요구되었습니다.
SSR과 CSR(Client-Side Rendering)이 혼재된 환경에서 Suspense를 사용하면서 데이터가 제대로 로드되기 전에 화면이 렌더링되는 문제가 있었습니다. - 해결 과정:
CustomNotice와 AllNotices를 감싸고 있던 Suspense를 제거했습니다.
searchParams와 관련된 코드를 SSR과 분리하기 위해 SearchNotices와 Result 페이지를 새로 작성했습니다.
SearchNotices에서 searchParams를 분리하여 Suspense를 독립적으로 처리하도록 변경했습니다.
SSR이 제대로 동작하도록 HydrationBoundary를 통해 상태를 관리하고, CSR 환경에서 필요한 비동기 작업은 fallback(로딩 스켈레톤)과 함께 Suspense를 활용하여 처리했습니다. - 결과:
SSR 적용이 제대로 동작하게 되어 초기 로딩 속도가 개선되었습니다.
서버에서 HTML을 정확히 반환하여 미리보기 화면에서도 콘텐츠가 정상적으로 표시되었습니다.
사용자 경험 및 SEO 성능이 함께 향상되었습니다. - 의미:
SSR과 CSR의 충돌 문제를 구조적으로 해결함으로써 서버와 클라이언트 간의 렌더링 문제를 방지하고, 보다 효율적인 데이터 로딩이 가능해졌습니다.
사용자의 경험을 저해하는 로딩 시간과 레이아웃 문제가 완전히 해결되었습니다.
프론트엔드 개발공부를 하고있습니다.