Wikied

📌 문제 배경

초기에는 Article 페이지 전체 콘텐츠가 모두 준비된 후에야 화면이 렌더링되는 구조였습니다. 이로 인해, 사용자가 첫 번째 주요 콘텐츠를 보기까지 지연이 발생했고, LCP가 2.4초로 기준선에 근접한 느린 수준이었습니다. 특히, 댓글(CommentSection)처럼 비동기 데이터를 필요로 하는 컴포넌트가 병목으로 작용하여 초기 화면 렌더링을 지연시켰고, 사용자 체감 속도가 저하되는 문제가 있었습니다.

🔍 원인 분석

• 모든 컴포넌트가 준비될 때까지 HTML 전송이 지연
• 비동기 컴포넌트가 초기 렌더링 병목을 유발
• React의 SSR 방식이 전체 페이지를 묶어 렌더링하는 구조로 UX에 불리하게 작용

🛠 해결 과정

1. React Suspense 기반의 Streaming SSR 적용
   • Next.js의 App Router 환경과 React Suspense를 활용하여, 주요 콘텐츠와 댓글을 독립적인 <Suspense>로 분리
   • fallback={<Skeleton />}을 사용해 주요 콘텐츠(ArticlePage)는 먼저 렌더링되고, 댓글(CommentSection)은 백그라운드에서 병렬 로딩
2. 서버 콘솔 로그를 통해 Streaming SSR 적용 여부 검증
   • 각 컴포넌트에 console.log()를 삽입하여 순차 렌더링 확인
   • ArticlePage → CommentSection 순서로 출력되어 Streaming 방식으로 전달되고 있음을 확인

✅ 결과

• LCP 약 12.5% 단축(2.4초 → 2.1초)
• 주요 콘텐츠가 더 빨리 렌더링되어 사용자 체감 속도 개선
• 댓글 컴포넌트를 백그라운드에서 로딩하여 UX 분리 및 체감 성능 향상

📌 문제 배경

초기 프로젝트에서는 SVG 아이콘을 직접 인라인으로 삽입하거나, public/ 폴더에 저장한 후 <Image> 태그로 불러오는 방식으로 사용했습니다. 하지만, SVG 파일 용량이 커지고, 불필요한 속성이 포함되어 렌더링 속도가 저하되는 문제가 발생했습니다. 특히, 자주 사용되는 아이콘이 여러 번 렌더링되면서 초기 로딩 시간이 증가했고, Lighthouse 성능 점수에서도 LCP(최대 콘텐츠 페인트) 지연이 확인되었습니다.

🔍 원인 분석

• SVG 파일이 최적화되지 않아 불필요한 속성과 중복된 코드가 포함됨
• SVG가 직접 인라인으로 삽입되면서 DOM이 복잡해짐
• 필요하지 않은 fill, stroke 속성이 유지되면서 스타일 오버라이드가 어려움
• SVG 파일 크기가 커질수록 브라우저 렌더링 속도 저하

🛠 해결 과정

1. SVGR을 활용하여 React 컴포넌트로 변환
   • SVG 아이콘을 React 컴포넌트로 변환하여 필요할 때만 렌더링하도록 변경
   • fill, stroke 속성을 props로 받아 동적으로 스타일 변경 가능하도록 처리
2. SVGO를 사용하여 불필요한 속성 제거 및 용량 최적화
3. SVG 사용 방식 개선
   • 자주 사용되는 아이콘 → SVGR을 활용한 React 컴포넌트 변환
   • 한 번만 사용되는 이미지 → public/ 폴더에 저장 후 next/image 활용

✅ 결과

• LCP 시간 28% 단축
• 불필요한 SVG 속성 제거 후 렌더링 시간 약 44% 단축
• React에서 불필요한 리렌더링을 줄이면서 최대 지연 시간 약 51% 감소

📌 문제 배경

Next.js의 내장 모달 라우팅을 사용하여 모달을 열고 닫는 기능을 구현할 때, URL 변경이 계속 발생하면서 Params와 배경 상태를 일관되게 관리해야 하는 문제가 생겼습니다. 모달 상태를 라우팅과 동기화하려다 보니 코드가 복잡해지고, URL과 UI 상태를 일관되게 유지하는 데 추가적인 관리가 필요해졌습니다. 이러한 과정에서 라우팅 의존성이 과도하게 커지는 점이 불편함을 느꼈습니다.

🔍 원인 분석

• Next.js 내장 모달 라우팅을 사용한 방식에서는, URL 상태와 모달의 상태를 동기화하려면 복잡한 코드가 필요
• URL이 변경되는 특성상, 모달 상태와 UI를 관리하는 과정이 번거로움

🛠 해결 과정

1. Next.js 내장 모달 라우팅을 사용한 방식에서는, URL 상태와 모달의 상태를 동기화하려면 복잡한 코드가 필요했지만, URL이 변경되는 특성상, 모달 상태와 UI를 관리하는 과정이 번거로워짐
2. 이를 해결하기 위해, Root Layout에서 React 포털을 사용하여 모달을 URL과 독립적인 상태로 관리했으며 이렇게 하면 URL 변경 없이 모달의 상태를 간단하게 관리할 수 있었고, UI와 라우팅의 복잡성을 줄일 수 있게됨

✅ 결과

• URL과 독립적으로 모달 상태를 관리하여 유지보수성 개선
• UI와 라우팅의 복잡성을 줄여 코드 간소화 및 개발 생산성 향상