#2 Dynamic Import로 댓글 섹션 지연 로딩하기
이번에 진행한 댓글 섹션 지연 로딩은 Deep Dive!의 블로그 프로젝트의 성능 최적화 과정의 일부로, 게시물 상세 페이지의 초기 로딩 속도를 개선하는 작업을 진행했다.
문제점: 불필요한 초기 로딩
기존 구조에서는 사용자가 게시물 상세 페이지에 접속하는 순간, 페이지에 존재하는 모든 컴포넌트의 JavaScript 코드를 한 번에 불러왔다. 여기에는 페이지 최하단에 위치한 댓글 섹션(CommentsSection)도 포함되어 있었다.
사용자가 댓글을 확인하기 위해 페이지를 끝까지 스크롤하지 않는 이상, 댓글 섹션의 코드는 당장 필요하지 않다. 그럼에도 불구하고 이 코드를 초기에 함께 로드하는 것은 불필요한 부담을 주어 첫 페이지를 표시하는 시간(Initial Page Load Time)을 지연시키는 원인이 될 수 있음을 확인했다.
해결 방안: next/dynamic을 이용한 지연 로딩
이 문제를 해결하기 위해 Next.js가 제공하는 dynamic import 기능을 활용했다. dynamic import는 특정 컴포넌트를 별도의 JavaScript 파일(청크)로 분리하고, 해당 컴포넌트가 실제로 필요한 시점에 비동기적으로 로드하도록 만드는 기술이다.
CommentsSection 컴포넌트를 동적으로 불러오도록 코드를 수정했다.
// app/posts/[postId]/page.tsx (수정 전) import CommentsSection from "@/components/comments/CommentsSection"; export default async function PostDetailPage({ params }: Props) { // ... return ( <div> <PostDetailView /* ... */ /> <CommentsSection postId={postId} /> </div> ); }``` ```tsx // components/PostDetailView.tsx (수정 후) 'use client'; import dynamic from 'next/dynamic'; const CommentsSection = dynamic( () => import('@/components/comments/CommentsSection'), { ssr: false, // 클라이언트에서만 렌더링 loading: () => <CommentsSkeleton />, // 로딩 중 보일 스켈레톤 UI } ); export default function PostDetailView({ /* ... */, postId }: PostDetailViewProps) { // ... return ( <> {/* ... */} <CommentsSection postId={postId} /> </> ); }
핵심은 댓글 섹션을 렌더링하는 책임을 기존 서버 컴포넌트(page.tsx)에서 클라이언트 컴포넌트(PostDetailView.tsx)로 옮기고, 그 안에서 dynamic import를 사용하는 것이었다. ssr: false 옵션을 통해 이 컴포넌트는 서버에서 렌더링되지 않고 오직 클라이언트에서만 로드되도록 설정했다.
<핵심 요약>
- 적용 방식: 댓글 섹션 지연 로딩(lazy loading)
- 주요 효과: 초기 JS 바이트 수 감소 → 본문 노출 속도 향상
- 체감도: 댓글이 적은 경우 눈에 띄게 체감되진 않음
- 의의: 사용자 경험(페이지 접속 속도 및 본문 접근성) 개선
개선 결과
이번 변경으로 CommentsSection 컴포넌트는 사용자가 페이지 하단에 도달해 해당 영역이 뷰포트에 가까워졌을 때에만 로드되도록 개선되었다. 비록 대부분의 게시물에는 아직 댓글이 없어 체감하기 어려운 최적화일 수 있지만, 초기 페이지 로딩 시 불필요한 JavaScript 다운로드 양을 줄이는 효과가 있었다. 그 결과 사용자는 게시물 본문 콘텐츠를 더 빠르게 확인할 수 있게 되었고, 이는 블로그의 핵심 사용자 경험을 향상시키는 의미 있는 개선으로 이어졌다.
